@multiplatform.one/forms 7.71.0 → 7.72.0

package/src/FloatingPanel/index.tsx

@@ -20,19 +20,26 @@ import {
   ensureKeyboardModalityTracking,
   motionDurationMs,
 } from "@multiplatform.one/theme";
-import { isWeb, Sheet, View, YStack } from "tamagui";
+import { isWeb, Sheet, Theme, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
-import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
+import { useFloatingPanel, panelViewportPadding, paintedCornerBox } from "./useFloatingPanel";
+import { fixedContainingBlockOrigin } from "./containingBlock";
 import type { PanelWidthMode } from "./useFloatingPanel";
+import {
+  echoOffset,
+  type PanelWidth,
+  panelLeftForWidth,
+  screenBounds,
+  slidesAlongScreen,
+} from "./panelWidth";
 import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
-import { fixedContainingBlockOrigin } from "./containingBlock";
 import {
   contextMenuPoint,
   placeOverTrigger,
@@ -77,6 +84,14 @@ export interface FloatingPanelProps {
   triggerRow?: ReactNode;
   anchorRect?: { x: number; y: number; width: number; height: number };
   triggerEcho?: boolean;
+  /**
+   * Which top corner of the trigger a covering panel opens from. `"start"`
+   * (default) keeps the echo row in place. `"auto"` is for an icon trigger
+   * (LC-112, FZ-8438): the trailing corner when the leading one would run off
+   * the end edge, and a vertical collision slides the menu up over its button
+   * instead of handing it to a sheet, the way an iOS menu grows out of it.
+   */
+  coverAlign?: "start" | "auto";
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
    * capture (e.g. DatePicker/ColorPicker clear). On native the trigger subtree
@@ -127,6 +142,14 @@ export interface FloatingPanelProps {
    * anything opened from a field-shaped trigger takes the floor.
    */
   widthMode?: PanelWidthMode;
+  /**
+   * How wide the panel opens over its trigger (LC-112, FZ-8438 r3):
+   * `"content"` hugs the content (never narrower than an echoed trigger),
+   * `"trigger"` is the trigger's width, `"screen"` fills the room between the
+   * screen's safe margins with its top edge still on the trigger's, and a
+   * number is a fixed width. Unset keeps each component's own default.
+   */
+  panelWidth?: PanelWidth;
   /**
    * @deprecated Pass `widthMode` instead — the boolean cannot express
    * `"match-trigger"`. `true` → `"fit-content"`, `false`/undefined →
@@ -277,6 +300,41 @@ const ECHO_STRIPPED_ATTRIBUTES = [
   "aria-activedescendant",
 ];
 
+function childPath(root: Element, node: Element): number[] | null {
+  const path: number[] = [];
+  for (let at: Element | null = node; at && at !== root; at = at.parentElement) {
+    const parent: Element | null = at.parentElement;
+    if (!parent) return null;
+    path.unshift(Array.prototype.indexOf.call(parent.children, at));
+  }
+  return path;
+}
+
+function followPath(root: Element, path: number[]): HTMLElement | null {
+  let at: Element | undefined = root;
+  for (const index of path) at = at?.children[index];
+  return (at as HTMLElement | undefined) ?? null;
+}
+
+/**
+ * LC-112 seamless cover (FZ-8438): the echo keeps the trigger's geometry but
+ * not its chrome. Its frame's border, fill, shadow and outline go, so the
+ * panel's own edge and surface are the only ones drawn and nothing separates
+ * the echo from the body. Widths stay, so the content sits where it did.
+ */
+function dropEchoChrome(source: HTMLElement, snapshot: HTMLElement) {
+  const painted = paintedCornerBox(source);
+  const path = painted ? childPath(source, painted) : null;
+  const frame = path ? followPath(snapshot, path) : null;
+  if (!frame) return;
+  frame.style.setProperty("border-color", "transparent", "important");
+  frame.style.setProperty("background-color", "transparent", "important");
+  frame.style.setProperty("background-image", "none", "important");
+  frame.style.setProperty("box-shadow", "none", "important");
+  frame.style.setProperty("outline", "none", "important");
+  frame.setAttribute("data-fp-echo-frame", "");
+}
+
 /**
  * The panel's first row when it opens over its trigger: the trigger's own
  * label/value, drawn where the trigger sits, so the panel reads as the
@@ -287,18 +345,30 @@ const ECHO_STRIPPED_ATTRIBUTES = [
  * stops stripped so labels, forms and queries still resolve to the one real
  * trigger. Pressing it closes the panel, like pressing the trigger again.
  */
-function TriggerEchoRow({
+export function TriggerEchoRow({
   sourceRef,
   onPress,
   children,
   anchorRect,
   source,
+  presentational = false,
+  edge = "top",
 }: {
   sourceRef: RefObject<HTMLElement | null>;
   onPress: () => void;
   children?: ReactNode;
   anchorRect?: FloatingPanelProps["anchorRect"];
   source: ReactNode;
+  /**
+   * Inside a listbox (Select) the echo is pointer-only and hidden from
+   * assistive tech: a button child would break the listbox's role contract.
+   */
+  presentational?: boolean;
+  /**
+   * `"bottom"` for a drop-up (FZ-8438 r3): the panel's bottom edge is the
+   * trigger's, so the echo is its last row, sticky at the bottom.
+   */
+  edge?: "top" | "bottom";
 }) {
   const rowRef = useRef<HTMLElement | null>(null);
   const visualRef = useRef<HTMLElement | null>(null);
@@ -320,17 +390,33 @@ function TriggerEchoRow({
         control?.textContent ||
         source.textContent ||
         "";
-      row.setAttribute("aria-label", label);
+      if (!presentational) row.setAttribute("aria-label", label);
       const rect = anchorRect ?? source.getBoundingClientRect();
-      row.style.width = `${rect.width}px`;
+      // A stretched echo (placeEchoOverTrigger) keeps its grown width.
+      const grown = Number(row.getAttribute("data-fp-echo-stretched")) || 0;
+      const stretched = grown > rect.width;
+      row.style.width = `${stretched ? grown : rect.width}px`;
       row.style.height = `${rect.height}px`;
       const rtl = isRtl(source);
       row.style.alignSelf = "flex-start";
       const frameStyle = row.parentElement ? getComputedStyle(row.parentElement) : null;
-      row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
       row.style.position = "sticky";
-      row.style.top = row.style.marginTop;
+      if (edge === "bottom") {
+        row.style.order = "1";
+        row.style.marginTop = "";
+        row.style.top = "";
+        row.style.marginBottom = `${-(parseFloat(frameStyle?.borderBottomWidth || "0") || 0)}px`;
+        row.style.bottom = row.style.marginBottom;
+      } else {
+        row.style.order = "";
+        row.style.marginBottom = "";
+        row.style.bottom = "";
+        row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
+        row.style.top = row.style.marginTop;
+      }
       row.style.zIndex = "1";
+      // Sticky over a scrolled body, so it carries the panel's own fill.
+      row.style.backgroundColor = frameStyle?.backgroundColor ?? "";
       row.style.marginLeft = rtl
         ? ""
         : `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
@@ -352,8 +438,11 @@ function TriggerEchoRow({
           node.setAttribute("tabindex", "-1");
         }
       }
+      if (children == null) dropEchoChrome(source, snapshot);
       snapshot.setAttribute("inert", "");
       snapshot.setAttribute("aria-hidden", "true");
+      snapshot.style.width = stretched ? "100%" : "";
+      snapshot.style.maxWidth = stretched ? "none" : "";
       if (children == null) visualRef.current?.replaceChildren(snapshot);
     };
     sync();
@@ -361,13 +450,14 @@ function TriggerEchoRow({
     const observer = new ResizeObserver(sync);
     observer.observe(source);
     return () => observer.disconnect();
-  }, [sourceRef, source, children, anchorRect]);
+  }, [sourceRef, source, children, anchorRect, presentational, edge]);
   return (
     <View
       ref={rowRef as any}
       data-fp-trigger-row=""
-      role="button"
-      aria-expanded={true}
+      {...(presentational
+        ? { "aria-hidden": true }
+        : { role: "button" as const, "aria-expanded": true })}
       tabIndex={-1}
       cursor="pointer"
       onPress={onPress}
@@ -381,6 +471,54 @@ function TriggerEchoRow({
   );
 }
 
+const ECHO_FIELD = 'input, textarea, [role="combobox"], [aria-haspopup="listbox"]';
+
+/**
+ * Keep the echo row on its trigger when the panel's start edge is not the
+ * trigger's (a `"screen"` or fixed `panelWidth`, or a panel slid back on
+ * screen). `translate` leaves the row's own margins and the panel's scale
+ * transform alone.
+ *
+ * With `stretch` (a consumer set `panelWidth`), a field's echo grows from the
+ * field's start edge to the panel's end edge: the value stays where it was,
+ * the chevron rides the panel's end, and the value is no longer cut short
+ * above rows that show it whole (LC-112 r3). A button echo keeps its box, so
+ * a centred label never moves.
+ */
+export function placeEchoOverTrigger(
+  panelElement: HTMLElement,
+  geometry: Parameters<typeof echoOffset>[0],
+  { stretch = false }: { stretch?: boolean } = {},
+) {
+  const row = panelElement.querySelector<HTMLElement>("[data-fp-trigger-row]");
+  if (!row) return;
+  const offset = echoOffset(geometry);
+  const x = geometry.rtl ? -offset : offset;
+  row.style.translate = Math.abs(x) < 0.5 ? "" : `${x}px 0`;
+  const triggerWidth = geometry.triggerRight - geometry.triggerLeft;
+  const grown = geometry.panelWidth - offset;
+  const field = stretch && row.querySelector(ECHO_FIELD) != null;
+  const visual = row.firstElementChild as HTMLElement | null;
+  const snapshot = visual?.firstElementChild as HTMLElement | null;
+  if (field && grown > triggerWidth + 0.5) {
+    row.style.width = `${grown}px`;
+    row.setAttribute("data-fp-echo-stretched", String(grown));
+    for (const node of [visual, snapshot]) {
+      if (!node) continue;
+      node.style.width = "100%";
+      node.style.maxWidth = "none";
+    }
+  } else if (row.hasAttribute("data-fp-echo-stretched")) {
+    row.removeAttribute("data-fp-echo-stretched");
+    row.style.width = `${triggerWidth}px`;
+    for (const node of [visual, snapshot]) {
+      if (!node) continue;
+      node.style.width = "";
+      node.style.maxWidth = "";
+    }
+  }
+}
+
 // ── FloatingPanel ─────────────────────────────────────────────
 
 // Canonical float↔sheet pivot (theme `layoutBreakpoints.medium` = Tamagui
@@ -623,10 +761,12 @@ function FloatingPanelWeb({
   sizing = "grow",
   widthMode,
   fitContent,
+  panelWidth,
   contentPadding = "default",
   openOn = "press",
   cover = true,
   triggerEcho = true,
+  coverAlign = "start",
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -647,6 +787,7 @@ function FloatingPanelWeb({
   const contentRef = useRef<HTMLElement | null>(null);
   const anchorPointRef = useRef<PanelPoint | null>(null);
   const pointPlacementRef = useRef<{ dropup: boolean; alignEnd: boolean } | null>(null);
+  const coverAlignEndRef = useRef(false);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
@@ -671,6 +812,8 @@ function FloatingPanelWeb({
     fitContent,
     freeOverlay: isContextMenu,
     cover,
+    panelWidth,
+    echo: cover && triggerEcho && !isContextMenu,
     onBeforeOpen: resetPosition,
   });
 
@@ -753,7 +896,48 @@ function FloatingPanelWeb({
           : 1;
       const layoutWidth = dropdownElement.getBoundingClientRect().width / (scale || 1);
       const width = Math.max(layoutWidth || dropdownElement.offsetWidth, measured.width);
-      const left = rtl ? measured.right - width : measured.left;
+      const startLeft = rtl ? measured.right - width : measured.left;
+      const endLeft = rtl ? measured.left : measured.right - width;
+      // An icon trigger has no echo to keep in place, so its menu opens from
+      // whichever top corner keeps it on screen: the trailing one for a bar
+      // button at the end edge, the way an iOS menu grows out of its button.
+      // Only the free edge needs the padding; the aligned edge is the trigger's.
+      const iconCover = coverAlign === "auto";
+      const startFree = rtl
+        ? startLeft >= viewportLeft + panelViewportPadding
+        : startLeft + width <= viewportRight - panelViewportPadding;
+      const endFree = rtl
+        ? endLeft + width <= viewportRight - panelViewportPadding
+        : endLeft >= viewportLeft + panelViewportPadding;
+      let alignEnd = iconCover && !startFree && endFree;
+      // A screen-wide or fixed-width panel is not tied to the trigger's start
+      // edge: it slides inside the margins, and only its echo stays put.
+      const slides = slidesAlongScreen(panelWidth);
+      const margins = {
+        boundsLeft: viewportLeft + panelViewportPadding,
+        boundsRight: viewportRight - panelViewportPadding,
+      };
+      const room =
+        panelWidth === "screen"
+          ? screenBounds({
+              triggerLeft: measured.left,
+              triggerRight: measured.right,
+              ...margins,
+              rtl,
+            })
+          : { left: margins.boundsLeft, right: margins.boundsRight };
+      const left = slides
+        ? panelLeftForWidth({
+            triggerLeft: measured.left,
+            triggerRight: measured.right,
+            width,
+            boundsLeft: room.left,
+            boundsRight: room.right,
+            rtl,
+          })
+        : alignEnd
+          ? endLeft
+          : startLeft;
       const firstActionHeight =
         contentRef.current?.querySelector<HTMLElement>(PANEL_FOCUSABLE)?.getBoundingClientRect()
           .height ||
@@ -774,14 +958,15 @@ function FloatingPanelWeb({
       if (
         measured.width > 0 &&
         measured.height > 0 &&
-        (left < viewportLeft ||
-          left + width > Math.max(measured.right, viewportRight - panelViewportPadding) ||
+        ((!slides &&
+          (left < viewportLeft ||
+            left + width > Math.max(measured.right, viewportRight - panelViewportPadding))) ||
           measured.right > viewportRight ||
           measured.top < viewportTop ||
           measured.top + Math.max(neededHeight, measured.height) >
             viewportBottom - panelViewportPadding)
       ) {
-        if (!clampCollisions) {
+        if (!clampCollisions && !iconCover) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
           return;
@@ -804,10 +989,24 @@ function FloatingPanelWeb({
             bottom: viewportBottom - panelViewportPadding,
           },
           rtl,
+          align: coverAlign,
         });
         placedTop = placed.top;
-        placedLeft = placed.left;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
       }
+      coverAlignEndRef.current = alignEnd;
+      placeEchoOverTrigger(
+        dropdownElement,
+        {
+          triggerLeft: measured.left,
+          triggerRight: measured.right,
+          panelLeft: placedLeft,
+          panelWidth: width,
+          rtl,
+        },
+        { stretch: panelWidth !== undefined },
+      );
       const top = placedTop - containingBlock.top;
       const cssLeft = placedLeft - containingBlock.left;
       const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - placedTop);
@@ -815,7 +1014,7 @@ function FloatingPanelWeb({
       dropdownElement.style.left = `${cssLeft}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = rtl ? "top right" : "top left";
+      dropdownElement.style.transformOrigin = rtl !== alignEnd ? "top right" : "top left";
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = { top, left: cssLeft, maxHeight };
       panel.initializingRef.current = false;
@@ -979,6 +1178,8 @@ function FloatingPanelWeb({
     anchorRect,
     clampCollisions,
     sheetProps.scrollable,
+    triggerEcho,
+    coverAlign,
     panel.placement,
     panel.refs,
     panel.triggerRef,
@@ -1201,92 +1402,99 @@ function FloatingPanelWeb({
       )}
       {panel.mounted && !collisionSheet && (
         <PanelPortal anchor={panel.triggerRef.current}>
-          <YStack
-            {...getFloatingProps({
-              ref: panel.refs.setFloating,
-              style: {
-                ...elevatedSurfaceStyle,
-                position: panel.strategy,
-                top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-                left: overlayStyleRef.current?.left ?? panel.x ?? 0,
-                scrollbarWidth: "none" as any,
-                zIndex: panelZIndex,
-                overflow: "auto",
-                ...(cover && !isContextMenu ? { overflowX: "hidden" as const } : {}),
-                ...panel.floatingStyleRef.current,
-                ...(overlayStyleRef.current
-                  ? { maxHeight: overlayStyleRef.current.maxHeight }
-                  : {}),
-                opacity: panel.visible ? 1 : 0,
-                // `none`, not scale(1): any transform makes this panel the
-                // containing block of a nested panel's `position: fixed`, which
-                // then positions against this box and is clipped by its scroll.
-                transform: panel.visible ? "none" : "scale(0.96)",
-                transition: webTransition,
-                transformOrigin:
-                  cover && !isContextMenu
-                    ? isRtl(panel.triggerRef.current)
-                      ? "top right"
-                      : "top left"
-                    : panelTransformOrigin(
-                        pointPlacementRef.current
-                          ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
-                          : panel.placement,
-                      ),
-              },
-              onScroll: handleScroll,
-              onTransitionEnd: (event) => {
-                if (
-                  event.target === event.currentTarget &&
-                  (event.propertyName === "height" || event.propertyName === "max-height")
-                ) {
-                  panel.updateArrows(event.currentTarget);
-                }
-              },
-            })}
-            data-testid="floating-panel-viewport"
-            data-fp-panel=""
-            {...panelChromeFocus}
-            pointerEvents={panel.visible ? "auto" : "none"}
-            {...elevatedSurfaceProps}
-            // Complete elevatedSurface fragment above is the ONLY surface source
-            // (SF-OVERLAY "including border and elevation", Round 2 docket).
-            // The one layered exception is anatomy, not surface: the dropdown
-            // radius clamp (same shape as Card's containerRadius over
-            // elevatedSurface) keeps list rows unclipped at large radius knobs.
-            borderRadius={panel.dropdownRadius}
-            paddingVertical={0}
-          >
-            {isContextMenu || !cover || !triggerEcho ? null : (
-              <TriggerEchoRow
-                sourceRef={panel.triggerRef}
-                source={trigger}
-                anchorRect={anchorRect}
-                onPress={() => onOpenChange(false)}
-              >
-                {triggerRow}
-              </TriggerEchoRow>
-            )}
-            <ScrollArrow
-              direction="up"
-              scrollRef={panel.refs.floating}
-              visible={panel.arrowUp}
-              arrowScrollDirRef={panel.arrowScrollDirRef}
-            />
-            <View
-              ref={contentRef as any}
-              {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
-              {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+          {/* The grouped surface step (alt1), the one a field's own list already
+              opens on: a light menu reads white over the page instead of the
+              page's own grey, and a dark menu's hairlines clear its fill. */}
+          <Theme name="alt1">
+            <YStack
+              {...getFloatingProps({
+                ref: panel.refs.setFloating,
+                style: {
+                  ...elevatedSurfaceStyle,
+                  position: panel.strategy,
+                  top: overlayStyleRef.current?.top ?? panel.y ?? 0,
+                  left: overlayStyleRef.current?.left ?? panel.x ?? 0,
+                  scrollbarWidth: "none" as any,
+                  zIndex: panelZIndex,
+                  overflow: "auto",
+                  ...(cover && !isContextMenu ? { overflowX: "hidden" as const } : {}),
+                  ...panel.floatingStyleRef.current,
+                  ...(overlayStyleRef.current
+                    ? { maxHeight: overlayStyleRef.current.maxHeight }
+                    : {}),
+                  opacity: panel.visible ? 1 : 0,
+                  // `none`, not scale(1): any transform makes this panel the
+                  // containing block of a nested panel's `position: fixed`, which
+                  // then positions against this box and is clipped by its scroll.
+                  transform: panel.visible ? "none" : "scale(0.96)",
+                  transition: webTransition,
+                  transformOrigin:
+                    cover && !isContextMenu
+                      ? isRtl(panel.triggerRef.current) !== coverAlignEndRef.current
+                        ? "top right"
+                        : "top left"
+                      : panelTransformOrigin(
+                          pointPlacementRef.current
+                            ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
+                            : panel.placement,
+                        ),
+                },
+                onScroll: handleScroll,
+                onTransitionEnd: (event) => {
+                  if (
+                    event.target === event.currentTarget &&
+                    (event.propertyName === "height" || event.propertyName === "max-height")
+                  ) {
+                    panel.updateArrows(event.currentTarget);
+                  }
+                },
+              })}
+              data-testid="floating-panel-viewport"
+              data-fp-panel=""
+              {...panelChromeFocus}
+              pointerEvents={panel.visible ? "auto" : "none"}
+              {...elevatedSurfaceProps}
+              // Complete elevatedSurface fragment above is the ONLY surface source
+              // (SF-OVERLAY "including border and elevation", Round 2 docket).
+              // The one layered exception is anatomy, not surface: the dropdown
+              // radius (Card's containerRadius shape over elevatedSurface). A
+              // covering panel takes its trigger's whole arc (LC-112 seamless
+              // cover); past the cap it insets its bottom so rows stay unclipped.
+              borderRadius={panel.dropdownRadius}
+              paddingVertical={0}
+              paddingBottom={panel.coverCornerInset || 0}
             >
-              <OverlayStackProvider zIndex={panelZIndex}>{children}</OverlayStackProvider>
-            </View>
-            <ScrollArrow
-              direction="down"
-              scrollRef={panel.refs.floating}
-              visible={panel.arrowDown}
-              arrowScrollDirRef={panel.arrowScrollDirRef}
-            />
-          </YStack>
+              {isContextMenu || !cover || !triggerEcho ? null : (
+                <TriggerEchoRow
+                  sourceRef={panel.triggerRef}
+                  source={trigger}
+                  anchorRect={anchorRect}
+                  onPress={() => onOpenChange(false)}
+                >
+                  {triggerRow}
+                </TriggerEchoRow>
+              )}
+              <ScrollArrow
+                direction="up"
+                scrollRef={panel.refs.floating}
+                visible={panel.arrowUp}
+                arrowScrollDirRef={panel.arrowScrollDirRef}
+              />
+              <View
+                ref={contentRef as any}
+                {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
+                {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+              >
+                <OverlayStackProvider zIndex={panelZIndex}>{children}</OverlayStackProvider>
+              </View>
+              <ScrollArrow
+                direction="down"
+                scrollRef={panel.refs.floating}
+                visible={panel.arrowDown}
+                arrowScrollDirRef={panel.arrowScrollDirRef}
+              />
+            </YStack>
+          </Theme>
         </PanelPortal>
       )}
     </>