@marimo-team/frontend 0.23.15-dev63 → 0.23.15-dev64

package/dist/assets/useBoolean-IdEpuCDV.js

@@ -0,0 +1 @@
+import{s as v}from"./chunk-LvLJmgfZ.js";import{t as h}from"./react-Bj1aDYRI.js";import{t as x}from"./compiler-runtime-B3qBwwSJ.js";import{f,g as s}from"./useEventListener-B_w3A283.js";import{r as y}from"./constants-CDyU_g2F.js";import{T as S}from"./config-BbOTTCYY.js";import{t as b}from"./createLucideIcon-w-Qo9n0R.js";var z=b("case-sensitive",[["path",{d:"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16",key:"d5nyq2"}],["path",{d:"M22 9v7",key:"pvm9v3"}],["path",{d:"M3.304 13h6.392",key:"1q3zxz"}],["circle",{cx:"18.5",cy:"12.5",r:"3.5",key:"z97x68"}]]),p=v(h(),1);const k=t=>{let e=null,n=async()=>(e||(e=t()),e);return{preload:n,Component:p.lazy(()=>n())}},E=typeof window<"u"&&window.parent!==window;function _(){new URLSearchParams(window.location.search).has(y.vscode)&&(!E||S()||(s.log("[vscode] Registering VS Code bindings"),C(),R(),L(),K()))}function R(){window.addEventListener("copy",()=>{var t;d({command:"copy",text:((t=window.getSelection())==null?void 0:t.toString())??""})}),window.addEventListener("cut",()=>{var e;let t=((e=window.getSelection())==null?void 0:e.toString())??"";f()&&document.execCommand("insertText",!1,""),d({command:"cut",text:t})}),window.addEventListener("message",async t=>{try{let e=t.data,n=f();switch(e.command){case"paste":if(s.log(`[vscode] Received paste mac=${n}`,e),n){let r=document.activeElement;if(!r){s.warn("[vscode] No active element to paste into"),document.execCommand("insertText",!1,e.text);return}let i=new DataTransfer;i.setData("text/plain",e.text),r.dispatchEvent(new ClipboardEvent("paste",{clipboardData:i}))}else s.log("[vscode] Not pasting on mac");return}}catch(e){s.error("Error in paste message handler",e)}})}function C(){document.addEventListener("keydown",t=>{var e,n;if((t.ctrlKey||t.metaKey)&&t.key==="c"){let r=((e=window.getSelection())==null?void 0:e.toString())??"";s.log("[vscode] Sending copy",r),d({command:"copy",text:r});return}if((t.ctrlKey||t.metaKey)&&t.key==="x"){let r=((n=window.getSelection())==null?void 0:n.toString())??"";f()&&document.execCommand("insertText",!1,""),s.log("[vscode] Sending cut",r),d({command:"cut",text:r});return}if((t.ctrlKey||t.metaKey)&&t.key==="v"){s.log("[vscode] Sending paste"),d({command:"paste"});return}})}function L(){document.addEventListener("click",t=>{let e=t.target;if(e.tagName!=="A")return;let n=e.getAttribute("href");n&&(n.startsWith("http://")||n.startsWith("https://"))&&(t.preventDefault(),d({command:"external_link",url:n}))})}function K(){document.addEventListener("contextmenu",t=>{t.preventDefault(),d({command:"context_menu"})})}function d(t){var e;(e=window.parent)==null||e.postMessage(t,"*")}var T={width:void 0,height:void 0};function D(t){let{ref:e,box:n="content-box",skip:r}=t,i=(0,p.useRef)({...T}),c=(0,p.useRef)(void 0);c.current=t.onResize,(0,p.useEffect)(()=>{if(!e.current||r||typeof window>"u"||!("ResizeObserver"in window))return;let m=new ResizeObserver(([l])=>{let u=n==="border-box"?"borderBoxSize":n==="device-pixel-content-box"?"devicePixelContentBoxSize":"contentBoxSize",o=w(l,u,"inlineSize"),a=w(l,u,"blockSize");if(i.current.width!==o||i.current.height!==a){let g={width:o,height:a};i.current.width=o,i.current.height=a,c.current&&c.current(g)}});return m.observe(e.current,{box:n}),()=>{m.disconnect()}},[n,e,r])}function w(t,e,n){return t[e]?Array.isArray(t[e])?t[e][0][n]:t[e][n]:e==="contentBoxSize"?t.contentRect[n==="inlineSize"?"width":"height"]:void 0}var P=x();function A(t){let e=(0,P.c)(6),[n,r]=(0,p.useState)(t),i;e[0]===Symbol.for("react.memo_cache_sentinel")?(i=o=>{var a;(a=o==null?void 0:o.stopPropagation)==null||a.call(o),r(!0)},e[0]=i):i=e[0];let c;e[1]===Symbol.for("react.memo_cache_sentinel")?(c=o=>{var a;(a=o==null?void 0:o.stopPropagation)==null||a.call(o),r(!1)},e[1]=c):c=e[1];let m;e[2]===Symbol.for("react.memo_cache_sentinel")?(m=o=>{var a;(a=o==null?void 0:o.stopPropagation)==null||a.call(o),r(B)},e[2]=m):m=e[2];let l;e[3]===Symbol.for("react.memo_cache_sentinel")?(l={setTrue:i,setFalse:c,toggle:m},e[3]=l):l=e[3];let u;return e[4]===n?u=e[5]:(u=[n,l],e[4]=n,e[5]=u),u}function B(t){return!t}export{k as a,d as i,D as n,z as o,_ as r,A as t};

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-C0JtPo0J.js"></script>
+    <script type="module" crossorigin src="./assets/index-CD0bwvp_.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-TXkS1QI3.js">
     <link rel="modulepreload" crossorigin href="./assets/objects-BlG0ZrO0.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
@@ -229,7 +229,7 @@
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-sLaKP2vj.js">
     <link rel="modulepreload" crossorigin href="./assets/form-CgWNb44_.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-BZLr8D7H.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-0INKlLC_.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-IdEpuCDV.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CSMoa-ga.js">
     <link rel="modulepreload" crossorigin href="./assets/types-jdbI9Q8O.js">
     <link rel="modulepreload" crossorigin href="./assets/semaphore-DtBYRzWS.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.15-dev63",
+  "version": "0.23.15-dev64",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { JSX, PropsWithChildren } from "react";
 import React from "react";
+import { createPortal } from "react-dom";
 import { z } from "zod";
 import {
   NavigationMenu,
@@ -9,9 +10,11 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
+  NavigationMenuViewport,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation";
 import { Tooltip } from "@/components/ui/tooltip";
+import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { cn } from "@/utils/cn";
 import { appendQueryParams } from "@/utils/urls";
@@ -21,6 +24,7 @@ import type {
 } from "../stateless-plugin";
 import "./navigation-menu.css";
 import { KnownQueryParams } from "@/core/constants";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 
 interface MenuItem {
   label: string;
@@ -45,6 +49,118 @@ interface Data {
   orientation: "horizontal" | "vertical";
 }
 
+interface PortalPosition {
+  left: number;
+  top: number;
+}
+
+interface HorizontalMenuGroupProps {
+  item: MenuItemGroup;
+  preserveQueryParams: (href: string) => string;
+  target: (href: string) => string;
+}
+
+const HorizontalMenuGroup = ({
+  item,
+  preserveQueryParams,
+  target,
+}: HorizontalMenuGroupProps): JSX.Element => {
+  const triggerRef = React.useRef<React.ComponentRef<
+    typeof NavigationMenuTrigger
+  > | null>(null);
+
+  return (
+    <NavigationMenuPrimitive.Root
+      className="relative z-10 max-w-max flex-1 items-center justify-center"
+      orientation="horizontal"
+    >
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger ref={triggerRef}>
+            {renderHTML({ html: item.label })}
+          </NavigationMenuTrigger>
+          <NavigationMenuContent className="w-auto">
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {item.items.map((subItem) => (
+                <ListItem
+                  key={subItem.label}
+                  label={subItem.label}
+                  href={preserveQueryParams(subItem.href)}
+                  target={target(subItem.href)}
+                >
+                  {subItem.description &&
+                    renderHTML({ html: subItem.description })}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewportPortal anchorRef={triggerRef}>
+        <NavigationMenuViewport />
+      </NavigationMenuViewportPortal>
+    </NavigationMenuPrimitive.Root>
+  );
+};
+
+const NavigationMenuViewportPortal = ({
+  anchorRef,
+  children,
+}: PropsWithChildren<{
+  anchorRef: React.RefObject<HTMLElement | null>;
+}>): React.ReactElement | null => {
+  const [position, setPosition] = React.useState<PortalPosition | null>(null);
+
+  const updatePosition = React.useCallback(() => {
+    if (!anchorRef.current) {
+      return;
+    }
+
+    const rect = anchorRef.current.getBoundingClientRect();
+    setPosition({
+      left: rect.left,
+      top: rect.bottom,
+    });
+  }, [anchorRef]);
+
+  React.useLayoutEffect(() => {
+    updatePosition();
+  }, [updatePosition]);
+
+  useResizeObserver({
+    ref: anchorRef,
+    onResize: updatePosition,
+  });
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    window.addEventListener("resize", updatePosition);
+    document.addEventListener("scroll", updatePosition, { capture: true });
+
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      document.removeEventListener("scroll", updatePosition, { capture: true });
+    };
+  }, [updatePosition]);
+
+  if (!position || typeof document === "undefined") {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className="fixed z-50"
+      style={{ left: position.left, top: position.top }}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+};
+
 export class NavigationMenuPlugin implements IStatelessPlugin<Data> {
   tagName = "marimo-nav-menu";
 
@@ -109,30 +225,12 @@ const NavMenuComponent = ({
   const renderMenuItem = (item: MenuItem | MenuItemGroup) => {
     if ("items" in item) {
       return orientation === "horizontal" ? (
-        <NavigationMenu orientation="horizontal" key={item.label}>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>
-                {renderHTML({ html: item.label })}
-              </NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                  {item.items.map((subItem) => (
-                    <ListItem
-                      key={subItem.label}
-                      label={subItem.label}
-                      href={preserveQueryParams(subItem.href)}
-                      target={target(subItem.href)}
-                    >
-                      {subItem.description &&
-                        renderHTML({ html: subItem.description })}
-                    </ListItem>
-                  ))}
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
+        <HorizontalMenuGroup
+          key={item.label}
+          item={item}
+          preserveQueryParams={preserveQueryParams}
+          target={target}
+        />
       ) : (
         <NavigationMenuItem key={item.label}>
           <div
@@ -196,32 +294,30 @@ const NavMenuComponent = ({
 };
 
 const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
+  React.ComponentRef<"a">,
   React.ComponentPropsWithoutRef<"a"> & {
     label: string;
   }
 >(({ className, label, children, ...props }, ref) => {
   return (
     <li>
-      <NavigationMenuLink asChild={true}>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className,
-          )}
-          {...props}
-        >
-          <div className="text-base font-medium leading-none">
-            {renderHTML({ html: label })}
-          </div>
-          {children && (
-            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-              {children}
-            </p>
-          )}
-        </a>
-      </NavigationMenuLink>
+      <a
+        ref={ref}
+        className={cn(
+          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          className,
+        )}
+        {...props}
+      >
+        <div className="text-base font-medium leading-none">
+          {renderHTML({ html: label })}
+        </div>
+        {children && (
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        )}
+      </a>
     </li>
   );
 });

package/dist/assets/useBoolean-0INKlLC_.js

@@ -1 +0,0 @@
-import{s as f}from"./chunk-LvLJmgfZ.js";import{t as w}from"./react-Bj1aDYRI.js";import{t as y}from"./compiler-runtime-B3qBwwSJ.js";import{f as u,g as c}from"./useEventListener-B_w3A283.js";import{r as v}from"./constants-CDyU_g2F.js";import{T as h}from"./config-BbOTTCYY.js";import{t as x}from"./createLucideIcon-w-Qo9n0R.js";var S=x("case-sensitive",[["path",{d:"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16",key:"d5nyq2"}],["path",{d:"M22 9v7",key:"pvm9v3"}],["path",{d:"M3.304 13h6.392",key:"1q3zxz"}],["circle",{cx:"18.5",cy:"12.5",r:"3.5",key:"z97x68"}]]),g=f(w(),1);const _=e=>{let t=null,n=async()=>(t||(t=e()),t);return{preload:n,Component:g.lazy(()=>n())}},k=typeof window<"u"&&window.parent!==window;function E(){new URLSearchParams(window.location.search).has(v.vscode)&&(!k||h()||(c.log("[vscode] Registering VS Code bindings"),L(),b(),C(),K()))}function b(){window.addEventListener("copy",()=>{var e;i({command:"copy",text:((e=window.getSelection())==null?void 0:e.toString())??""})}),window.addEventListener("cut",()=>{var t;let e=((t=window.getSelection())==null?void 0:t.toString())??"";u()&&document.execCommand("insertText",!1,""),i({command:"cut",text:e})}),window.addEventListener("message",async e=>{try{let t=e.data,n=u();switch(t.command){case"paste":if(c.log(`[vscode] Received paste mac=${n}`,t),n){let a=document.activeElement;if(!a){c.warn("[vscode] No active element to paste into"),document.execCommand("insertText",!1,t.text);return}let s=new DataTransfer;s.setData("text/plain",t.text),a.dispatchEvent(new ClipboardEvent("paste",{clipboardData:s}))}else c.log("[vscode] Not pasting on mac");return}}catch(t){c.error("Error in paste message handler",t)}})}function L(){document.addEventListener("keydown",e=>{var t,n;if((e.ctrlKey||e.metaKey)&&e.key==="c"){let a=((t=window.getSelection())==null?void 0:t.toString())??"";c.log("[vscode] Sending copy",a),i({command:"copy",text:a});return}if((e.ctrlKey||e.metaKey)&&e.key==="x"){let a=((n=window.getSelection())==null?void 0:n.toString())??"";u()&&document.execCommand("insertText",!1,""),c.log("[vscode] Sending cut",a),i({command:"cut",text:a});return}if((e.ctrlKey||e.metaKey)&&e.key==="v"){c.log("[vscode] Sending paste"),i({command:"paste"});return}})}function C(){document.addEventListener("click",e=>{let t=e.target;if(t.tagName!=="A")return;let n=t.getAttribute("href");n&&(n.startsWith("http://")||n.startsWith("https://"))&&(e.preventDefault(),i({command:"external_link",url:n}))})}function K(){document.addEventListener("contextmenu",e=>{e.preventDefault(),i({command:"context_menu"})})}function i(e){var t;(t=window.parent)==null||t.postMessage(e,"*")}var T=y();function D(e){let t=(0,T.c)(6),[n,a]=(0,g.useState)(e),s;t[0]===Symbol.for("react.memo_cache_sentinel")?(s=o=>{var r;(r=o==null?void 0:o.stopPropagation)==null||r.call(o),a(!0)},t[0]=s):s=t[0];let m;t[1]===Symbol.for("react.memo_cache_sentinel")?(m=o=>{var r;(r=o==null?void 0:o.stopPropagation)==null||r.call(o),a(!1)},t[1]=m):m=t[1];let d;t[2]===Symbol.for("react.memo_cache_sentinel")?(d=o=>{var r;(r=o==null?void 0:o.stopPropagation)==null||r.call(o),a(z)},t[2]=d):d=t[2];let l;t[3]===Symbol.for("react.memo_cache_sentinel")?(l={setTrue:s,setFalse:m,toggle:d},t[3]=l):l=t[3];let p;return t[4]===n?p=t[5]:(p=[n,l],t[4]=n,t[5]=p),p}function z(e){return!e}export{S as a,_ as i,E as n,i as r,D as t};