@carlonicora/nextjs-jsonapi 6.20.6 → 6.21.0

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/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}