@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/DataTableBulkActions/DataTableBulkActions.stories.tsx

@@ -1,6 +1,7 @@
+import { Checkbox } from "@multiplatform.one/forms";
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
-import { Checkbox, Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 import { type BulkAction, DataTableBulkActions, useRowSelection } from "./index";
 
 // Define the data type
@@ -309,7 +310,7 @@ export const WithRowSelectionHook = () => {
           >
             <Checkbox
               checked={selection.isSelected(task)}
-              onCheckedChange={() => {}} // Handled by onPress
+              onChange={() => {}} // Handled by onPress
             />
             <YStack flex={1}>
               <Text fontWeight="500">{task.title}</Text>
@@ -324,9 +325,9 @@ export const WithRowSelectionHook = () => {
       <XStack gap="$3" alignItems="center">
         <Checkbox
           checked={selection.isAllSelected || selection.isIndeterminate}
-          onCheckedChange={() => selection.toggleAll()}
+          onChange={() => selection.toggleAll()}
+          label="Select All"
         />
-        <Text>Select All</Text>
         <Text fontSize="$2" color="$gray11">
           ({selection.selectedItems.length} selected)
         </Text>

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -1,23 +1,30 @@
 /**
  * CellModalEditor — wraps tall field types (FileUpload, Signature, RichText,
- * etc.) in a Tamagui Dialog that opens on cell click. Cell shows a compact
- * `FieldDisplay` summary; click opens a centered modal with the full editor.
+ * etc.) in a forms FloatingPanel that opens on cell click. The cell shows a
+ * compact `FieldDisplay` summary; a click opens the full editor in a panel
+ * that attaches to the cell it was opened from (MPO-38 cover contract), the
+ * same FloatingPanel the native variant uses (a sheet there and at 640 and
+ * below). It never grows the row (LC-06).
  *
- * The modal is a staging buffer (UX-023 / Axiom 7 AGENCY): the inner editor
+ * The panel is a staging buffer (UX-023 / Axiom 7 AGENCY): the inner editor
  * is wired to a local draft seeded from the committed value on open — nothing
- * reaches the row while the modal is open. "Done" commits the draft once via
+ * reaches the row while the panel is open. "Done" commits the draft once via
  * `onCommit`; an outside click also commits (LC-21: a cell editor's draft
  * still commits on the outside-click close); "Cancel" and Escape discard the
  * draft and leave the row untouched. Cancel is never disabled (LC-30) and the
- * footer stays within the two-action dialog budget (LC-31).
+ * footer stays within the two-action budget (LC-31).
  */
 
-import { DialogContent, DialogOverlay } from "@multiplatform.one/components";
-import { Button, FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
+import {
+  Button,
+  FieldDisplay,
+  FloatingPanel,
+  type FieldDisplayType,
+} from "@multiplatform.one/forms";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback, useRef, useState, type ReactNode } from "react";
-import { Dialog, View, XStack, YStack, isWeb } from "tamagui";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { Text, View, XStack, YStack, isWeb } from "tamagui";
 import { t } from "../../shared/t";
 
 export interface CellModalEditorProps {
@@ -29,12 +36,12 @@ export interface CellModalEditorProps {
   /** Commits the staged draft to the row. Fires at most once per session. */
   onCommit: (value: any) => void;
   /**
-   * Full editor mounted inside the modal, wired to the staged draft: render
+   * Full editor mounted inside the panel, wired to the staged draft: render
    * with `draftValue` and report edits through `onDraftChange` — never
    * straight to the row.
    */
   children: (draftValue: any, onDraftChange: (value: any) => void) => ReactNode;
-  /** Title shown in the modal header. */
+  /** Title shown in the panel header. */
   title?: string;
   /**
    * Accessible name for the chromeless cell trigger (column header).
@@ -56,7 +63,7 @@ export function CellModalEditor({
 }: CellModalEditorProps) {
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
-  // Draft session: exists only while the modal is open, seeded from the
+  // Draft session: exists only while the panel is open, seeded from the
   // committed value so the editor starts at the cell's current value
   // (Axiom 11 VALUE IS DATA).
   const [draft, setDraft] = useState<{ value: any } | null>(null);
@@ -67,7 +74,7 @@ export function CellModalEditor({
   const onCommitRef = useRef(onCommit);
   onCommitRef.current = onCommit;
   // Escape / Cancel flag the close as a discard before onOpenChange(false)
-  // lands; every other close path (Done, overlay/outside click) commits.
+  // lands; every other close path (Done, outside click) commits.
   const discardRef = useRef(false);
 
   const handleOpen = useCallback(() => {
@@ -97,6 +104,18 @@ export function CellModalEditor({
     [handleOpen],
   );
 
+  // FloatingPanel reports every close as onOpenChange(false). Escape is a
+  // dismissal, not a confirm, so it is flagged in the capture phase, before
+  // the panel's own Escape listener closes it.
+  useEffect(() => {
+    if (!open || !isWeb || typeof document === "undefined") return;
+    const flagEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") discardRef.current = true;
+    };
+    document.addEventListener("keydown", flagEscape, true);
+    return () => document.removeEventListener("keydown", flagEscape, true);
+  }, [open]);
+
   const handleCancel = useCallback(() => {
     discardRef.current = true;
     handleOpenChange(false);
@@ -108,76 +127,77 @@ export function CellModalEditor({
   }, []);
 
   const triggerLocked = disabled || readOnly;
-  const handleTriggerKeyDown = (event: { key?: string; preventDefault?: () => void }) => {
+  const handleTriggerKeyDown = (event: {
+    key?: string;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
     if (triggerLocked) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault?.();
+      event.stopPropagation?.();
       handleOpen();
     }
   };
 
+  const trigger = (
+    <View
+      cursor={triggerLocked ? "default" : "pointer"}
+      opacity={disabled ? 0.5 : 1}
+      flexDirection="row"
+      alignItems="center"
+      width="100%"
+      paddingHorizontal="$1"
+      paddingVertical="$1"
+      hoverStyle={!triggerLocked ? { backgroundColor: "$backgroundHover" } : undefined}
+      // LC-71: parent CellWrapper paints the one ring on the cell boundary.
+      outlineWidth={0}
+      focusVisibleStyle={{ outlineWidth: 0 }}
+      {...(isWeb && !triggerLocked
+        ? {
+            role: "button" as const,
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-haspopup": "dialog" as const,
+            "aria-expanded": open,
+            onKeyDown: handleTriggerKeyDown,
+          }
+        : undefined)}
+    >
+      <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
+    </View>
+  );
+
   return (
-    <>
-      <View
-        onPress={handleOpen}
-        cursor={triggerLocked ? "default" : "pointer"}
-        opacity={disabled ? 0.5 : 1}
-        flexDirection="row"
-        alignItems="center"
-        width="100%"
-        paddingHorizontal="$1"
-        paddingVertical="$1"
-        hoverStyle={!triggerLocked ? { backgroundColor: "$backgroundHover" } : undefined}
-        // LC-71: parent CellWrapper paints the one ring on the cell boundary.
-        outlineWidth={0}
-        focusVisibleStyle={{ outlineWidth: 0 }}
-        {...(isWeb && !triggerLocked
-          ? {
-              role: "button" as const,
-              tabIndex: 0,
-              "aria-label": label,
-              "aria-haspopup": "dialog" as const,
-              "aria-expanded": open,
-              onKeyDown: handleTriggerKeyDown,
-            }
-          : undefined)}
+    <FloatingPanel
+      open={open}
+      onOpenChange={handleOpenChange}
+      disabled={triggerLocked}
+      trigger={trigger}
+    >
+      <YStack
+        {...knobProps.gap}
+        width={720}
+        maxWidth="90vw"
+        data-testid="cell-modal-editor-panel"
+        data-dismiss-class="compose"
       >
-        <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
-      </View>
-      <Dialog open={open} onOpenChange={handleOpenChange} modal>
-        <Dialog.Portal>
-          <DialogOverlay opacity={0.5} />
-          <DialogContent
-            maxWidth={720}
-            maxHeight="80vh"
-            width="90vw"
-            // Escape is a dismissal, not a confirm: mark the pending close as
-            // a discard, then let the Dialog close itself.
-            onEscapeKeyDown={() => {
-              discardRef.current = true;
-            }}
-          >
-            <Dialog.Title {...knobProps.heading}>{title ?? t("Edit")}</Dialog.Title>
-            {/* flexShrink (not flex-basis 0): in the auto-height dialog a
-                basis-0 wrapper collapses and its children paint over the
-                footer / past the dialog frame (LC-10). The context reset
-                restores full field chrome — the modal is not a table cell,
-                but React context flows through the Dialog portal. */}
-            <YStack flexShrink={1} minHeight={0}>
-              <TableCellContext.Provider value={{ inTableCell: false }}>
-                {children(draft ? draft.value : value, handleDraftChange)}
-              </TableCellContext.Provider>
-            </YStack>
-            <XStack {...knobProps.gap} justifyContent="flex-end">
-              {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
-              <Button onPress={handleCancel}>{t("Cancel")}</Button>
-              <Button theme="accent" onPress={() => handleOpenChange(false)}>
-                {t("Done")}
-              </Button>
-            </XStack>
-          </DialogContent>
-        </Dialog.Portal>
-      </Dialog>
-    </>
+        <Text {...knobProps.heading}>{title ?? t("Edit")}</Text>
+        {/* The panel is not a table cell: restore full field chrome. React
+            context flows in because the panel renders inline (no portal). */}
+        <YStack flexShrink={1} minHeight={0}>
+          <TableCellContext.Provider value={{ inTableCell: false }}>
+            {children(draft ? draft.value : value, handleDraftChange)}
+          </TableCellContext.Provider>
+        </YStack>
+        <XStack {...knobProps.gap} justifyContent="flex-end">
+          {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
+          <Button onPress={handleCancel}>{t("Cancel")}</Button>
+          <Button theme="accent" onPress={() => handleOpenChange(false)}>
+            {t("Done")}
+          </Button>
+        </XStack>
+      </YStack>
+    </FloatingPanel>
   );
 }

package/src/components/DataTableCell/cellDraftPolicy.spec.tsx

@@ -153,7 +153,8 @@ function MockRadioGroup({ value, onValueChange, options }: any) {
 
 /**
  * Functional FloatingPanel fake: trigger toggles open; children render only
- * while open (mirrors the popover/sheet contract CellOptionsEditor relies on).
+ * while open; Escape inside closes it (mirrors the popover/sheet contract
+ * CellOptionsEditor and CellModalEditor rely on).
  */
 function MockFloatingPanel({ open, onOpenChange, trigger, children, disabled }: any) {
   return (
@@ -166,7 +167,16 @@ function MockFloatingPanel({ open, onOpenChange, trigger, children, disabled }:
       >
         {trigger}
       </div>
-      {open ? <div data-testid="floating-panel-content">{children}</div> : null}
+      {open ? (
+        <div
+          data-testid="floating-panel-content"
+          onKeyDown={(event) => {
+            if (event.key === "Escape") onOpenChange?.(false);
+          }}
+        >
+          {children}
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/components/DataTableCell/cellModalEditor.spec.tsx

@@ -1,33 +1,17 @@
 /**
- * CellModalEditor design-law tests — the modal is SF-OVERLAY / E-OVERLAY.
- *
- * The house DialogContent owns elevatedSurface + containerRadius + transition
- * (LC-18). A fixed 1px border on Dialog.Content was the recorded GAP; this
- * spec locks the recipe path so it cannot regress to a handwritten frame.
+ * CellModalEditor on web (MPO-221): the tall-field editor is a FloatingPanel
+ * attached to the cell it was opened from, the same primitive the native
+ * variant uses, not a centered Dialog. The panel owns the SF-OVERLAY /
+ * E-OVERLAY surface (elevatedSurface); the staging contract rides on top.
  */
 
 import React from "react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
-const dialogContentProps: Record<string, unknown>[] = [];
-
-vi.mock("@multiplatform.one/components", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@multiplatform.one/components")>();
-  return {
-    ...actual,
-    DialogContent: (props: Record<string, unknown>) => {
-      dialogContentProps.push(props);
-      return React.createElement(
-        "div",
-        { "data-testid": "cell-modal-dialog-content" },
-        props.children as React.ReactNode,
-      );
-    },
-  };
-});
-
 vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
   ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
   FieldDisplay: (props: { field?: string }) =>
@@ -47,36 +31,78 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
 
 import { CellModalEditor } from "./CellModalEditor";
 
-describe("CellModalEditor — overlay recipes", () => {
-  it("opens DialogContent without a fixed 1px border (SF-OVERLAY recipe path)", async () => {
-    dialogContentProps.length = 0;
-    renderWithProviders(
-      <CellModalEditor
-        field="textarea"
-        value="hello"
-        onCommit={vi.fn()}
-        title="Edit text"
-        label="Notes"
-      >
-        {(draft, onDraftChange) =>
-          React.createElement("textarea", {
-            "data-testid": "draft-editor",
-            value: draft,
-            onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-              onDraftChange(event.target.value),
-          })
-        }
-      </CellModalEditor>,
-    );
+const panel = () =>
+  document.querySelector('[data-testid="floating-panel-viewport"]') as HTMLElement | null;
 
-    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
-    await waitFor(() => expect(screen.getByTestId("cell-modal-dialog-content")).toBeTruthy());
+function renderEditor(onCommit = vi.fn()) {
+  const utils = renderWithProviders(
+    <CellModalEditor
+      field="textarea"
+      value="hello"
+      onCommit={onCommit}
+      title="Edit text"
+      label="Notes"
+    >
+      {(draft, onDraftChange) =>
+        React.createElement("textarea", {
+          "data-testid": "draft-editor",
+          value: draft,
+          onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+            onDraftChange(event.target.value),
+        })
+      }
+    </CellModalEditor>,
+  );
+  return { ...utils, onCommit };
+}
 
-    const frame = dialogContentProps.at(-1);
-    expect(frame).toBeTruthy();
-    expect(frame?.borderWidth).toBeUndefined();
-    expect(frame?.borderColor).toBeUndefined();
+describe("CellModalEditor on web — FloatingPanel, not a Dialog (MPO-221)", () => {
+  it("opens the editor inside the FloatingPanel viewport", async () => {
+    renderEditor();
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    expect(panel()!.contains(screen.getByTestId("draft-editor"))).toBe(true);
+    expect(panel()!.textContent).toContain("Edit text");
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
     expect(screen.getByRole("button", { name: "Cancel" })).not.toBeDisabled();
     expect(screen.getByRole("button", { name: "Done" })).toBeTruthy();
   });
+
+  it("anchors to the cell trigger: the panel's reference wraps the cell face", async () => {
+    renderEditor();
+    const face = screen.getByTestId("mock-FieldDisplay");
+    expect(face.closest("[data-fp-reference]")).not.toBeNull();
+    fireEvent.click(face);
+    await waitFor(() => expect(panel()).not.toBeNull());
+    expect(panel()!.style.position).toBe("fixed");
+  });
+
+  it("an outside click commits the draft (LC-21)", async () => {
+    const { onCommit } = renderEditor();
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    fireEvent.change(screen.getByTestId("draft-editor"), { target: { value: "changed" } });
+    fireEvent.click(document.body);
+    await waitFor(() => expect(panel()).toBeNull());
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(onCommit).toHaveBeenCalledWith("changed");
+  });
+
+  it("Escape discards the draft", async () => {
+    const { onCommit } = renderEditor();
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    const editor = screen.getByTestId("draft-editor");
+    fireEvent.change(editor, { target: { value: "changed" } });
+    fireEvent.keyDown(editor, { key: "Escape" });
+    await waitFor(() => expect(panel()).toBeNull());
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("the web source no longer mounts a Tamagui Dialog", () => {
+    const source = readFileSync(join(__dirname, "CellModalEditor.tsx"), "utf8");
+    expect(source).not.toMatch(/\bDialog\b.*from "tamagui"/);
+    expect(source).not.toMatch(/DialogContent|DialogOverlay/);
+    expect(source).toMatch(/<FloatingPanel/);
+  });
 });

package/src/components/DataTableCell/dataTableCell.spec.tsx

@@ -19,10 +19,11 @@ import { describe, expect, it, vi } from "vitest";
 // ── Mock form components ──────────────────────────────────────
 
 function createMock(name: string) {
-  const Comp = React.forwardRef((_props: any, ref: any) =>
+  const Comp = React.forwardRef((props: any, ref: any) =>
     React.createElement("div", {
       "data-testid": `mock-${name}`,
       "data-component": name,
+      "data-currency": props.currency,
       ref,
     }),
   );
@@ -187,6 +188,17 @@ describe("DataTableCell field type parity", () => {
     expectNotRendered(container, "Input");
   });
 
+  it("a currency stepper cell hands the currency to Stepper (MPO-221)", () => {
+    const { container } = renderCell({
+      field: "stepper",
+      value: 42,
+      fieldProps: { currency: "USD" },
+    });
+    expect(
+      container.querySelector('[data-component="Stepper"]')?.getAttribute("data-currency"),
+    ).toBe("USD");
+  });
+
   it("rating renders Rating, not custom star icons", () => {
     const { container } = renderCell({
       field: "rating",
@@ -217,10 +229,15 @@ describe("DataTableCell field type parity", () => {
     expect(display?.getAttribute("data-field")).toBe(fieldType);
     // Editor is not mounted until the cell is clicked
     expectNotRendered(baseElement, editorName);
-    // Clicking the cell opens the modal containing the real editor
+    // Clicking the cell opens the panel containing the real editor. The
+    // panel renders inline (no portal), so the cell FACE is the trigger
+    // subtree and the editor lives in the panel content beside it.
     fireEvent.click(display!);
     await waitFor(() => expectRendered(baseElement, editorName));
-    return { container, baseElement };
+    const face = container.querySelector('[data-testid="floating-panel-trigger"]') as HTMLElement;
+    const panel = container.querySelector('[data-testid="floating-panel-content"]') as HTMLElement;
+    expectRendered(panel, editorName);
+    return { container, baseElement, face, panel };
   }
 
   it("fileupload renders FileUpload, not custom FileUploadCell", async () => {
@@ -234,14 +251,14 @@ describe("DataTableCell field type parity", () => {
   });
 
   it("signature renders Signature, not status text", async () => {
-    const { container } = await expectModalEditor(
+    const { face } = await expectModalEditor(
       { field: "signature", value: "" },
       "signature",
       "Signature",
     );
     // Old implementation showed "Not signed" / "Sign" in the cell
-    expect(container.textContent).not.toContain("Not signed");
-    expect(container.textContent).not.toContain("Sign");
+    expect(face.textContent).not.toContain("Not signed");
+    expect(face.textContent).not.toContain("Sign");
   });
 
   it("geolocation renders Geolocation, not two plain Inputs", async () => {
@@ -271,16 +288,16 @@ describe("DataTableCell field type parity", () => {
   });
 
   it("barcode routes through the modal editor (LC-06), never inline in the cell", async () => {
-    const { container, baseElement } = await expectModalEditor(
+    const { face, panel } = await expectModalEditor(
       { field: "barcode", value: "SKU-001234" },
       "barcode",
       "Barcode",
     );
     // The full editor (with its camera scanner surface) must not mount inline
-    // in the cell — only inside the modal after click.
-    expectNotRendered(container, "Barcode");
-    // The modal also carries the large scannable preview.
-    expectRendered(baseElement, "BarcodePreview");
+    // in the cell face — only inside the panel after click.
+    expectNotRendered(face, "Barcode");
+    // The panel also carries the large scannable preview.
+    expectRendered(panel, "BarcodePreview");
   });
 
   it("custom render receives the cell's honest state as the render context (D-18.4)", () => {
@@ -372,13 +389,13 @@ describe("DataTableCell field type parity", () => {
   });
 
   it("textarea routes through the modal editor (LC-06), never inline in the cell", async () => {
-    const { container, baseElement } = await expectModalEditor(
+    const { face, panel } = await expectModalEditor(
       { field: "textarea", value: "line one\nline two" },
       "textarea",
       "TextArea",
     );
-    expectNotRendered(container, "TextArea");
-    expectRendered(baseElement, "TextArea");
+    expectNotRendered(face, "TextArea");
+    expectRendered(panel, "TextArea");
   });
 
   it("cell chrome carries the LC-71 composite ring class (keyboard-only, not mouse-within)", () => {

package/src/components/DataTableCell/index.tsx

@@ -46,6 +46,7 @@ import {
   ColorPicker,
   // Read-only display variants
   FieldDisplay,
+  containsAcrossPanels,
 } from "@multiplatform.one/forms";
 import { CellModalEditor } from "./CellModalEditor";
 import { CellOptionsEditor } from "./CellOptionsEditor";
@@ -380,6 +381,7 @@ export function DataTableCell({
                 max={max}
                 step={step ?? 1}
                 precision={precision ?? 0}
+                currency={currency}
                 disabled={disabled}
                 readOnly={readOnly}
                 placeholder={placeholder || "0"}
@@ -1167,8 +1169,7 @@ function DraftFieldEditor({
       if (event.key === "Escape") cancelDraft();
     };
     const handleDocPointerDown = (event: PointerEvent) => {
-      const node = containerRef.current;
-      if (node && event.target instanceof Node && node.contains(event.target)) return;
+      if (containsAcrossPanels(containerRef.current, event.target)) return;
       setSessionActive(false);
       commitDraft();
     };

package/src/components/DataTableDateFilter/DataTableDateFilter.spec.tsx

@@ -156,12 +156,15 @@ describe("DataTableDateFilter - DatePicker integration", () => {
   /**
    * Open the picker behind `placeholder` and click a day in its calendar.
    * A just-closed picker panel lingers mounted (with live handlers!) until
-   * its close timer fires, so first wait until no panel is mounted — then
-   * the day query can safely be global (forms DatePicker spec pattern).
+   * its close timer fires, so first wait until the filter's own panel is the
+   * only one mounted — then the day query can safely be global (forms
+   * DatePicker spec pattern). Panels portal to the page (MPO-335), so a
+   * picker panel is a sibling of the filter panel, not inside it.
    */
+  const panels = '[data-testid="floating-panel-viewport"]';
   const pickDay = async (placeholder: string, day: number) => {
     await waitFor(() => {
-      expect(document.querySelectorAll('[data-testid="floating-panel-viewport"]').length).toBe(0);
+      expect(document.querySelectorAll(panels).length).toBe(1);
     });
     fireEvent.click(screen.getByPlaceholderText(placeholder));
     await waitFor(() => {