@carlonicora/nextjs-jsonapi 6.20.6 → 6.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "6.20.6",
+  "version": "6.22.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/containers/RoundPageContainer.tsx

@@ -244,9 +244,16 @@ export function RoundPageContainer({
   // demo bar, a credit warning). Unset, it is 0 and the height is unchanged; an
   // app that renders such a banner publishes its live height on <html>, or the
   // banner pushes the page past the viewport and the document scrolls it away.
+  // `--app-footer-h` is the same for a panel fixed to the bottom of the viewport
+  // (a drawer over the page): published while it is shown, it keeps the bottom
+  // of a full-height page above the panel instead of under it.
   const shellHeight = isFixed
-    ? `h-[calc(100svh-var(--app-header-h,3rem)-var(--app-banner-h,0px))]`
-    : `min-h-[calc(100svh-var(--app-header-h,3rem)-var(--app-banner-h,0px))]`;
+    ? `h-[calc(100svh-var(--app-header-h,3rem)-var(--app-banner-h,0px)-var(--app-footer-h,0px))]`
+    : `min-h-[calc(100svh-var(--app-header-h,3rem)-var(--app-banner-h,0px)-var(--app-footer-h,0px))]`;
+  // A page that grows with its content scrolls the document instead, so it gets the
+  // panel's height as bottom margin: its last lines can scroll above the panel. A
+  // full-height page already subtracts it from its height above, so it gets none.
+  const footerSpace = isFixed ? `` : `mb-[var(--app-footer-h,0px)]`;
   const clip = isFixed ? `overflow-hidden` : ``;
   const scrollY = isFixed ? `overflow-y-auto` : ``;
   // The bar is an in-flow sibling of the content (see MobileNavigationBar's own
@@ -364,6 +371,7 @@ export function RoundPageContainer({
           className={cn(
             "flex w-full flex-col",
             shellHeight,
+            footerSpace,
             // Deliberately NO bottom safe-area inset, here or in
             // MobileNavigationBar. iOS still reports 34px of bottom inset
             // (measured in an installed PWA), but nothing is drawn in that strip
@@ -409,6 +417,7 @@ export function RoundPageContainer({
         className={cn(
           `flex w-full flex-col`,
           shellHeight,
+          footerSpace,
           // Deliberately NO bottom safe-area inset, here or in
           // MobileNavigationBar. iOS still reports 34px of bottom inset
           // (measured in an installed PWA), but nothing is drawn in that strip

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

@@ -61,4 +61,25 @@ describe("RoundPageContainer shell padding", () => {
     expect(shell.classList.contains("p-2")).toBe(true);
     expect(shell.classList.contains("ps-0")).toBe(false);
   });
+
+  it("keeps the page above a bottom panel: the height also subtracts --app-footer-h", async () => {
+    render(withShared(<RoundPageContainer testId="shell">content</RoundPageContainer>));
+    const shell = await screen.findByTestId("shell");
+    expect(shell.className).toContain("-var(--app-footer-h,0px))]");
+  });
+
+  it("a page that grows with its content gets the bottom panel's height as margin; a full-height one does not", async () => {
+    const { unmount } = render(
+      withShared(
+        <RoundPageContainer testId="doc" scroll="document">
+          content
+        </RoundPageContainer>,
+      ),
+    );
+    expect((await screen.findByTestId("doc")).classList.contains("mb-[var(--app-footer-h,0px)]")).toBe(true);
+    unmount();
+
+    render(withShared(<RoundPageContainer testId="fixed">content</RoundPageContainer>));
+    expect((await screen.findByTestId("fixed")).classList.contains("mb-[var(--app-footer-h,0px)]")).toBe(false);
+  });
 });

package/src/components/forms/EditorSheet.tsx

@@ -320,8 +320,8 @@ export function EditorSheet<T extends FieldValues>({
                     render={<div />}
                     nativeButton={false}
                     size="sm"
-                    variant={isLabelled ? "outline" : "ghost"}
-                    className="text-muted-foreground"
+                    variant={isLabelled ? "default" : "ghost"}
+                    className={isLabelled ? undefined : "text-muted-foreground"}
                   >
                     <PencilIcon />
                     {isLabelled && t("ui.buttons.edit")}

package/src/components/forms/__tests__/EditorSheet.spec.tsx

@@ -77,6 +77,22 @@ describe("EditorSheet", () => {
       expect(screen.getByText("Custom")).toBeTruthy();
     });
 
+    it("should render a labelled edit trigger as a primary button", () => {
+      render(<TestEditor isEdit={true} showLabel={true} />);
+      const trigger = document.querySelector('[data-help="editor.edit"]');
+      expect(trigger?.textContent).toContain("ui.buttons.edit");
+      expect(trigger?.className).toContain("bg-primary");
+      expect(trigger?.className).not.toContain("text-muted-foreground");
+    });
+
+    it("should render an unlabelled edit trigger as a muted glyph", () => {
+      render(<TestEditor isEdit={true} showLabel={false} />);
+      const trigger = document.querySelector('[data-help="editor.edit"]');
+      expect(trigger?.textContent).not.toContain("ui.buttons.edit");
+      expect(trigger?.className).not.toContain("bg-primary");
+      expect(trigger?.className).toContain("text-muted-foreground");
+    });
+
     it("should not render trigger when dialogOpen is controlled", () => {
       render(<TestEditor dialogOpen={false} />);
       expect(screen.queryByText("ui.buttons.create")).toBeNull();

package/src/features/oauth/components/OAuthClientDetail.tsx

@@ -201,7 +201,7 @@ export function OAuthClientDetail({
           {/* Actions */}
           <div className="flex gap-3 pt-4">
             {onEdit && (
-              <Button variant="outline" onClick={onEdit} disabled={isLoading}>
+              <Button onClick={onEdit} disabled={isLoading}>
                 <Pencil className="h-4 w-4 me-2" />
                 {t("ui.buttons.edit")}
               </Button>

package/src/features/user/contexts/UserContext.tsx

@@ -76,6 +76,7 @@ export const UserProvider = ({ children, dehydratedUser }: UserProviderProps) =>
     };
 
     const functions: ReactNode[] = [];
+    const actionBar: ReactNode[] = [];
 
     if (user) {
       response.element = `${user.name}${user.isDeleted ? ` (${t(`user.deleted`)})` : ""}`;
@@ -86,17 +87,20 @@ export const UserProvider = ({ children, dehydratedUser }: UserProviderProps) =>
         if (!user.isActivated)
           functions.push(<UserResentInvitationEmail key={`UserResentInvitationEmail`} user={user} />);
 
-        functions.push(<UserDeleter key={`UserDeleter`} user={user} />);
+        actionBar.push(<UserDeleter key={`UserDeleter`} user={user} />);
 
         // Opt-in: only apps that registered AccountDeletionModule, platform administrators only.
         if (hasRole(getRoleId().Administrator) && isAccountDeletionEnabled())
           functions.push(<AccountDeletionAdminTrigger key={`AccountDeletionAdminTrigger`} user={user} />);
       }
 
-      functions.push(<UserEditor key={`UserEditor`} user={user} propagateChanges={setUser} />);
+      // Delete and Edit live in the secondary header (action bar), where they
+      // render as labelled buttons, like every other entity page.
+      actionBar.push(<UserEditor key={`UserEditor`} user={user} propagateChanges={setUser} />);
     }
 
     if (functions.length > 0) response.functions = functions;
+    if (actionBar.length > 0) response.actionBar = actionBar;
 
     return response;
   };

package/src/shadcnui/ui/__tests__/popover.container.spec.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+
+describe("PopoverContent container", () => {
+  it("portals the popup into the given container instead of <body>", async () => {
+    const container = document.createElement("div");
+    container.setAttribute("data-testid", "trap");
+    document.body.appendChild(container);
+
+    render(
+      <Popover defaultOpen>
+        <PopoverTrigger>open</PopoverTrigger>
+        <PopoverContent container={container}>inside</PopoverContent>
+      </Popover>,
+    );
+
+    const popup = await screen.findByText("inside");
+    expect(container.contains(popup)).toBe(true);
+    container.remove();
+  });
+});

package/src/shadcnui/ui/popover.tsx

@@ -20,15 +20,20 @@ function PopoverContent({
   side = "bottom",
   sideOffset = 4,
   anchor,
+  container,
   ...props
 }: PopoverPrimitive.Popup.Props &
-  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor">) {
+  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor"> &
+  // Where the popup is portalled (default: <body>). A popover opened from inside a
+  // focus-trapping surface (a modal dialog or drawer) passes that surface here, or
+  // the trap pulls focus back out of the popup and its inputs cannot be typed in.
+  Pick<PopoverPrimitive.Portal.Props, "container">) {
   // Pickers size themselves to their field (`w-(--anchor-width)`). In a narrow
   // field on a phone that leaves a ~100px list where every name wraps, so on a
   // phone they get a usable minimum width (capped to the screen).
   const matchesAnchorWidth = typeof className === "string" && className.includes("--anchor-width");
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={container}>
       <PopoverPrimitive.Positioner
         align={align}
         alignOffset={alignOffset}