@marimo-team/islands 0.17.0 → 0.17.1

package/src/components/editor/renderers/vertical-layout/vertical-layout-wrapper.tsx

@@ -21,13 +21,16 @@ export const VerticalLayoutWrapper: React.FC<PropsWithChildren<Props>> = ({
     <div
       className={cn(
         "px-1 sm:px-16 md:px-20 xl:px-24 print:px-0 print:pb-0",
+        // Large mobile bottom padding due to mobile browser navigation bar
+        "pb-24 sm:pb-12",
         className,
       )}
     >
       <div
         className={cn(
-          // Large mobile bottom padding due to mobile browser navigation bar
-          "m-auto pb-24 sm:pb-12",
+          "m-auto",
+          // This padding needs to be the same from above to be correctly applied
+          "pb-24 sm:pb-12",
           appConfig.width === "compact" &&
             "max-w-(--content-width) min-w-[400px]",
           appConfig.width === "medium" &&

package/src/components/home/state.ts

@@ -4,6 +4,7 @@ import { atomWithStorage } from "jotai/utils";
 import React from "react";
 import type { MarimoFile } from "@/core/network/types";
 import { Functions } from "@/utils/functions";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 export type RunningNotebooksMap = Map<string, MarimoFile>;
 
@@ -19,12 +20,12 @@ export const WorkspaceRootContext = React.createContext<string>("");
 export const includeMarkdownAtom = atomWithStorage<boolean>(
   "marimo:home:include-markdown",
   false,
-  undefined,
+  jotaiJsonStorage,
   { getOnInit: true },
 );
 export const expandedFoldersAtom = atomWithStorage<Record<string, boolean>>(
   "marimo:home:expanded-folders",
   {},
-  undefined,
+  jotaiJsonStorage,
   { getOnInit: true },
 );

package/src/components/scratchpad/scratchpad-history.ts

@@ -1,12 +1,17 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 const MAX_HISTORY_ITEMS = 15;
 const KEY = "marimo:scratchpadHistory:v1";
 
 // Atom for storing the history
-export const scratchpadHistoryAtom = atomWithStorage<string[]>(KEY, []);
+export const scratchpadHistoryAtom = atomWithStorage<string[]>(
+  KEY,
+  [],
+  jotaiJsonStorage,
+);
 
 // Atom for controlling the visibility of the history list
 export const historyVisibleAtom = atom(false);

package/src/components/slides/slides-component.tsx

@@ -11,6 +11,7 @@ import {
 import { Swiper, type SwiperRef, SwiperSlide } from "swiper/react";
 import { Button } from "@/components/ui/button";
 import { useEventListener } from "@/hooks/useEventListener";
+import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { cn } from "@/utils/cn";
 
 import "./slides.css";
@@ -30,6 +31,7 @@ const SlidesComponent = ({
 }: PropsWithChildren<SlidesComponentProps>): JSX.Element => {
   const el = React.useRef<SwiperRef>(null);
   const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const { hasFullscreen } = useIframeCapabilities();
 
   useEventListener(document, "fullscreenchange", () => {
     if (document.fullscreenElement) {
@@ -103,28 +105,30 @@ const SlidesComponent = ({
           </SwiperSlide>
         );
       })}
-      <Button
-        variant="link"
-        size="sm"
-        data-testid="marimo-plugin-slides-fullscreen"
-        onClick={async () => {
-          if (!el.current) {
-            return;
-          }
-          const domEl = el.current as unknown as HTMLElement;
+      {hasFullscreen && (
+        <Button
+          variant="link"
+          size="sm"
+          data-testid="marimo-plugin-slides-fullscreen"
+          onClick={async () => {
+            if (!el.current) {
+              return;
+            }
+            const domEl = el.current as unknown as HTMLElement;
 
-          if (document.fullscreenElement) {
-            await document.exitFullscreen();
-            setIsFullscreen(false);
-          } else {
-            await domEl.requestFullscreen();
-            setIsFullscreen(true);
-          }
-        }}
-        className="absolute bottom-0 right-0 z-10 mx-1 mb-0"
-      >
-        {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
-      </Button>
+            if (document.fullscreenElement) {
+              await document.exitFullscreen();
+              setIsFullscreen(false);
+            } else {
+              await domEl.requestFullscreen();
+              setIsFullscreen(true);
+            }
+          }}
+          className="absolute bottom-0 right-0 z-10 mx-1 mb-0"
+        >
+          {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+        </Button>
+      )}
     </Swiper>
   );
 };

package/src/components/ui/confirmation-button.tsx

@@ -67,7 +67,7 @@ export const ConfirmationButton: React.FC<ConfirmationButtonProps> = ({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogTrigger asChild={true}>{children}</AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{title}</AlertDialogTitle>

package/src/components/ui/context-menu.tsx

@@ -10,7 +10,11 @@ import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { StyleNamespace } from "@/theme/namespace";
 import { cn } from "@/utils/cn";
-import { withFullScreenAsRoot } from "./fullscreen";
+import {
+  MAX_HEIGHT_OFFSET,
+  withFullScreenAsRoot,
+  withSmartCollisionBoundary,
+} from "./fullscreen";
 import {
   MenuShortcut,
   menuContentCommon,
@@ -25,6 +29,12 @@ const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = withFullScreenAsRoot(ContextMenuPrimitive.Portal);
+const InternalContextMenuContent = withSmartCollisionBoundary(
+  ContextMenuPrimitive.Content,
+);
+const InternalContextMenuSubContent = withSmartCollisionBoundary(
+  ContextMenuPrimitive.SubContent,
+);
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
@@ -52,7 +62,7 @@ const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
+  <InternalContextMenuSubContent
     ref={ref}
     className={cn(
       menuContentCommon({ subcontent: true }),
@@ -72,7 +82,7 @@ const ContextMenuContent = React.forwardRef<
 >(({ className, scrollable = true, ...props }, ref) => (
   <ContextMenuPortal>
     <StyleNamespace>
-      <ContextMenuPrimitive.Content
+      <InternalContextMenuContent
         ref={ref}
         className={cn(
           menuContentCommon(),
@@ -83,7 +93,7 @@ const ContextMenuContent = React.forwardRef<
         style={{
           ...props.style,
           maxHeight: scrollable
-            ? "calc(var(--radix-context-menu-content-available-height) - 30px)"
+            ? `calc(var(--radix-context-menu-content-available-height) - ${MAX_HEIGHT_OFFSET}px)`
             : undefined,
         }}
         {...props}

package/src/components/ui/dropdown-menu.tsx

@@ -5,7 +5,11 @@ import { Check, ChevronRight, Circle } from "lucide-react";
 import React from "react";
 import { StyleNamespace } from "@/theme/namespace";
 import { cn } from "@/utils/cn";
-import { withFullScreenAsRoot } from "./fullscreen";
+import {
+  MAX_HEIGHT_OFFSET,
+  withFullScreenAsRoot,
+  withSmartCollisionBoundary,
+} from "./fullscreen";
 import {
   MenuShortcut,
   menuContentCommon,
@@ -21,6 +25,12 @@ const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = withFullScreenAsRoot(DropdownMenuPrimitive.Portal);
+const InternalDropdownMenuContent = withSmartCollisionBoundary(
+  DropdownMenuPrimitive.Content,
+);
+const InternalDropdownMenuSubContent = withSmartCollisionBoundary(
+  DropdownMenuPrimitive.SubContent,
+);
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
@@ -47,7 +57,7 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
+  <InternalDropdownMenuSubContent
     ref={ref}
     className={cn(
       menuContentCommon({ subcontent: true }),
@@ -68,7 +78,7 @@ const DropdownMenuContent = React.forwardRef<
 >(({ className, scrollable = true, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPortal>
     <StyleNamespace>
-      <DropdownMenuPrimitive.Content
+      <InternalDropdownMenuContent
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
@@ -80,7 +90,7 @@ const DropdownMenuContent = React.forwardRef<
         style={{
           ...props.style,
           maxHeight: scrollable
-            ? "calc(var(--radix-dropdown-menu-content-available-height) - 30px)"
+            ? `calc(var(--radix-dropdown-menu-content-available-height) - ${MAX_HEIGHT_OFFSET}px)`
             : undefined,
         }}
         {...props}

package/src/components/ui/fullscreen.tsx

@@ -1,8 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { useState } from "react";
+import type { PopoverContentProps } from "@radix-ui/react-popover";
+import React, { useState } from "react";
+import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useEventListener } from "@/hooks/useEventListener";
 
+const VSCODE_OUTPUT_CONTAINER_SELECTOR = "[data-vscode-output-container]";
+
+// vscode has smaller viewport so we need all the max-height we can get.
+// Otherwise, we give a 30px buffer to the max-height.
+export const MAX_HEIGHT_OFFSET = isInVscodeExtension() ? 0 : 30;
+
 /**
  * Get the full screen element if we are in full screen mode
  */
@@ -25,14 +33,120 @@ export function withFullScreenAsRoot<
     container?: Element | DocumentFragment | null;
   },
 >(Component: React.ComponentType<T>) {
+  const FindClosestVscodeOutputContainer = (props: T) => {
+    const [closest, setClosest] = React.useState<Element | null>(null);
+    const el = React.useRef<HTMLDivElement>(null);
+
+    React.useLayoutEffect(() => {
+      if (!el.current) {
+        return;
+      }
+
+      const found = closestThroughShadowDOMs(
+        el.current,
+        VSCODE_OUTPUT_CONTAINER_SELECTOR,
+      );
+      setClosest(found);
+    }, []);
+
+    return (
+      <>
+        <div ref={el} className="contents invisible" />
+        <Component {...props} container={closest} />
+      </>
+    );
+  };
+
   const Comp = (props: T) => {
     const fullScreenElement = useFullScreenElement();
+
+    // If we are in the VSCode extension, we use the VSCode output container
+    const vscodeOutputContainer = isInVscodeExtension();
+    if (vscodeOutputContainer) {
+      return <FindClosestVscodeOutputContainer {...props} />;
+    }
+
     if (!fullScreenElement) {
       return <Component {...props} />;
     }
+
     return <Component {...props} container={fullScreenElement} />;
   };
 
   Comp.displayName = Component.displayName;
   return Comp;
 }
+
+/**
+ * HOC wrapping a PortalContent component to set a better collision boundary,
+ * when inside vscode.
+ */
+export function withSmartCollisionBoundary<
+  T extends {
+    collisionBoundary?: PopoverContentProps["collisionBoundary"];
+  },
+>(Component: React.ComponentType<T>) {
+  const FindClosestVscodeOutputContainer = (props: T) => {
+    const [closest, setClosest] = React.useState<Element | null>(null);
+    const el = React.useRef<HTMLDivElement>(null);
+
+    React.useLayoutEffect(() => {
+      if (!el.current) {
+        return;
+      }
+
+      const found = closestThroughShadowDOMs(
+        el.current,
+        VSCODE_OUTPUT_CONTAINER_SELECTOR,
+      );
+      setClosest(found);
+    }, []);
+
+    return (
+      <>
+        <div ref={el} className="contents invisible" />
+        <Component {...props} collisionBoundary={closest} />
+      </>
+    );
+  };
+
+  const Comp = (props: T) => {
+    // If we are in the VSCode extension, we use the VSCode output container
+    const vscodeOutputContainer = isInVscodeExtension();
+    if (vscodeOutputContainer) {
+      return <FindClosestVscodeOutputContainer {...props} />;
+    }
+
+    return <Component {...props} />;
+  };
+
+  Comp.displayName = Component.displayName;
+  return Comp;
+}
+
+/**
+ * Find the closest element (with .closest), but through shadow DOMs.
+ */
+function closestThroughShadowDOMs(
+  element: Element,
+  selector: string,
+): Element | null {
+  let currentElement: Element | null = element;
+
+  while (currentElement) {
+    const cellElement = currentElement.closest(selector);
+    if (cellElement) {
+      return cellElement;
+    }
+
+    const root = currentElement.getRootNode();
+    currentElement =
+      root instanceof ShadowRoot ? root.host : currentElement.parentElement;
+
+    if (currentElement === root) {
+      break;
+    }
+  }
+
+  return null;
+}

package/src/components/ui/popover.tsx

@@ -4,7 +4,11 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 import { StyleNamespace } from "@/theme/namespace";
 import { cn } from "@/utils/cn";
-import { withFullScreenAsRoot } from "./fullscreen";
+import {
+  MAX_HEIGHT_OFFSET,
+  withFullScreenAsRoot,
+  withSmartCollisionBoundary,
+} from "./fullscreen";
 
 const Popover = PopoverPrimitive.Root;
 
@@ -12,6 +16,10 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverPortal = withFullScreenAsRoot(PopoverPrimitive.Portal);
 const PopoverClose = PopoverPrimitive.Close;
 
+const InternalPopoverContent = withSmartCollisionBoundary(
+  PopoverPrimitive.Content,
+);
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
@@ -32,7 +40,7 @@ const PopoverContent = React.forwardRef<
   ) => {
     const content = (
       <StyleNamespace>
-        <PopoverPrimitive.Content
+        <InternalPopoverContent
           ref={ref}
           align={align}
           sideOffset={sideOffset}
@@ -44,7 +52,7 @@ const PopoverContent = React.forwardRef<
           style={{
             ...props.style,
             maxHeight: scrollable
-              ? "calc(var(--radix-popover-content-available-height) - 30px)"
+              ? `calc(var(--radix-popover-content-available-height) - ${MAX_HEIGHT_OFFSET}px)`
               : undefined,
           }}
           {...props}

package/src/components/ui/range-slider.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
 import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
@@ -9,6 +8,7 @@ import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
 import {
   TooltipContent,
+  TooltipPortal,
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,

package/src/components/ui/select.tsx

@@ -12,7 +12,7 @@ import {
 import * as React from "react";
 import { StyleNamespace } from "@/theme/namespace";
 import { cn } from "@/utils/cn";
-import { withFullScreenAsRoot } from "./fullscreen";
+import { withFullScreenAsRoot, withSmartCollisionBoundary } from "./fullscreen";
 import { MENU_ITEM_DISABLED } from "./menu-items";
 import { selectStyles } from "./native-select";
 
@@ -60,13 +60,17 @@ const SelectTrigger = React.forwardRef<
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
+const InternalSelectContent = withSmartCollisionBoundary(
+  SelectPrimitive.Content,
+);
+
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPortal>
     <StyleNamespace>
-      <SelectPrimitive.Content
+      <InternalSelectContent
         ref={ref}
         className={cn(
           "max-h-[300px] relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -94,7 +98,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-[20px] bg-background text-muted-foreground cursor-default">
           <ChevronDownIcon className="h-4 w-4 opacity-50" />
         </SelectPrimitive.ScrollDownButton>
-      </SelectPrimitive.Content>
+      </InternalSelectContent>
     </StyleNamespace>
   </SelectPortal>
 ));

package/src/components/ui/slider.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
 import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
@@ -9,6 +8,7 @@ import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
 import {
   TooltipContent,
+  TooltipPortal,
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,

package/src/components/ui/tooltip.tsx

@@ -4,6 +4,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 import { StyleNamespace } from "@/theme/namespace";
 import { cn } from "@/utils/cn";
+import { withFullScreenAsRoot, withSmartCollisionBoundary } from "./fullscreen";
 
 const TooltipProvider = ({
   delayDuration = 400,
@@ -12,7 +13,12 @@ const TooltipProvider = ({
   <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
 );
 
+const TooltipPortal = withFullScreenAsRoot(TooltipPrimitive.Portal);
+
 const TooltipRoot = TooltipPrimitive.Root;
+const InternalTooltipContent = withSmartCollisionBoundary(
+  TooltipPrimitive.Content,
+);
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
@@ -21,7 +27,7 @@ const TooltipContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <StyleNamespace>
-    <TooltipPrimitive.Content
+    <InternalTooltipContent
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
@@ -64,11 +70,11 @@ const Tooltip: React.FC<
         {children}
       </TooltipTrigger>
       {usePortal ? (
-        <TooltipPrimitive.TooltipPortal>
+        <TooltipPortal>
           <TooltipContent side={side} align={align}>
             {content}
           </TooltipContent>
-        </TooltipPrimitive.TooltipPortal>
+        </TooltipPortal>
       ) : (
         <TooltipContent side={side} align={align}>
           {content}
@@ -83,5 +89,6 @@ export {
   TooltipRoot,
   TooltipTrigger,
   TooltipContent,
+  TooltipPortal,
   TooltipProvider,
 };