@marimo-team/islands 0.25.1-dev4 → 0.25.1-dev40

package/src/hooks/__tests__/useOverflowDetection.test.tsx

@@ -10,23 +10,23 @@ const mockObserve = vi.fn();
 const mockDisconnect = vi.fn();
 
 global.ResizeObserver = class MockResizeObserver {
-  callback: ResizeObserverCallback;
+  public callback: ResizeObserverCallback;
 
-  constructor(callback: ResizeObserverCallback) {
+  public constructor(callback: ResizeObserverCallback) {
     this.callback = callback;
   }
 
-  observe(target: Element) {
+  public observe(target: Element) {
     mockObserve(target);
     // Simulate initial observation callback
     this.callback([], this);
   }
 
-  unobserve() {
+  public unobserve() {
     // noop
   }
 
-  disconnect() {
+  public disconnect() {
     mockDisconnect();
   }
 };

package/src/hooks/__tests__/useResizeObserver.test.tsx

@@ -16,9 +16,9 @@ describe("useResizeObserver", () => {
   it("should call observe when ref is provided", () => {
     const observeSpy = vi.fn();
     global.ResizeObserver = class MockedResizeObserver {
-      observe = observeSpy;
-      unobserve = vi.fn();
-      disconnect = vi.fn();
+      public observe = observeSpy;
+      public unobserve = vi.fn();
+      public disconnect = vi.fn();
     };
 
     renderHook(() =>
@@ -33,9 +33,9 @@ describe("useResizeObserver", () => {
   it("should not call observe when ref is not provided", () => {
     const observeSpy = vi.fn();
     global.ResizeObserver = class MockedResizeObserver {
-      observe = observeSpy;
-      unobserve = vi.fn();
-      disconnect = vi.fn();
+      public observe = observeSpy;
+      public unobserve = vi.fn();
+      public disconnect = vi.fn();
     };
 
     renderHook(() =>
@@ -50,9 +50,9 @@ describe("useResizeObserver", () => {
   it("should not call observe when skipped", () => {
     const observeSpy = vi.fn();
     global.ResizeObserver = class MockedResizeObserver {
-      observe = observeSpy;
-      unobserve = vi.fn();
-      disconnect = vi.fn();
+      public observe = observeSpy;
+      public unobserve = vi.fn();
+      public disconnect = vi.fn();
     };
 
     renderHook(() =>
@@ -68,9 +68,9 @@ describe("useResizeObserver", () => {
   it("disconnect should be called once unmounted", () => {
     const disconnectSpy = vi.fn();
     global.ResizeObserver = class MockedResizeObserver {
-      observe = vi.fn();
-      unobserve = vi.fn();
-      disconnect = disconnectSpy;
+      public observe = vi.fn();
+      public unobserve = vi.fn();
+      public disconnect = disconnectSpy;
     };
 
     const { unmount } = renderHook(() =>

package/src/plugins/core/registerReactComponent.tsx

@@ -336,7 +336,7 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
     private pluginRef = createRef<PluginSlotHandle>();
     protected __type__ = customElementLocator;
 
-    constructor() {
+    public constructor() {
       super();
       // Create a shadow root so we can store the React tree on the shadow root, while the original
       // element's children are still on the DOM
@@ -349,7 +349,7 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
       });
     }
 
-    connectedCallback() {
+    public connectedCallback() {
       // Skip mounting if this element is in the light DOM of another
       // marimo custom element. The parent element's shadow DOM will
       // re-create this element via getChildren() -> renderHTML(), so
@@ -383,7 +383,7 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
       });
     }
 
-    disconnectedCallback() {
+    public disconnectedCallback() {
       this.observer.disconnect();
       this.root?.unmount();
       if (this.mounted) {
@@ -419,7 +419,7 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
      * Reset the plugin initial value and data.
      * And then re-render the plugin.
      */
-    reset() {
+    public reset() {
       this.dispatchEvent(
         createInputEvent(parseAttrValue(this.dataset.initialValue), this),
       );
@@ -429,7 +429,7 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
     /**
      * Re-render the plugin.
      */
-    rerender() {
+    public rerender() {
       this.pluginRef.current?.reset();
     }
 

package/src/plugins/core/sidebar-element.tsx

@@ -19,7 +19,7 @@ export function initializeSidebarElement(): void {
     private observer?: MutationObserver;
     private uniqueId = Symbol(createId());
 
-    connectedCallback() {
+    public connectedCallback() {
       // Render the component for the first time
       this.mountReactComponent();
 
@@ -39,7 +39,7 @@ export function initializeSidebarElement(): void {
       });
     }
 
-    disconnectedCallback() {
+    public disconnectedCallback() {
       if (this.observer) {
         this.observer.disconnect();
         this.unmountReactComponent();

package/src/plugins/impl/ButtonPlugin.tsx

@@ -20,9 +20,9 @@ interface Data {
 }
 
 export class ButtonPlugin implements IPlugin<number, Data> {
-  tagName = "marimo-button";
+  public tagName = "marimo-button";
 
-  validator = z.object({
+  public validator = z.object({
     label: z.string(),
     kind: zodIntent,
     disabled: z.boolean().default(false),
@@ -31,7 +31,7 @@ export class ButtonPlugin implements IPlugin<number, Data> {
     keyboardShortcut: z.string().optional(),
   });
 
-  render(props: IPluginProps<number, Data>): JSX.Element {
+  public render(props: IPluginProps<number, Data>): JSX.Element {
     const {
       data: { disabled, kind, label, fullWidth, tooltip, keyboardShortcut },
     } = props;

package/src/plugins/impl/CheckboxPlugin.tsx

@@ -18,15 +18,15 @@ interface Data {
 }
 
 export class CheckboxPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-checkbox";
+  public tagName = "marimo-checkbox";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.boolean(),
     label: z.string().nullable(),
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return <CheckboxComponent {...props} />;
   }
 }

package/src/plugins/impl/CodeEditorPlugin.tsx

@@ -25,9 +25,9 @@ interface Data {
 }
 
 export class CodeEditorPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-code-editor";
+  public tagName = "marimo-code-editor";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.string(),
     language: z.string().default("python"),
     placeholder: z.string(),
@@ -40,7 +40,7 @@ export class CodeEditorPlugin implements IPlugin<T, Data> {
     debounce: z.union([z.boolean(), z.number()]).default(false),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <CodeEditorComponent
         {...props.data}

package/src/plugins/impl/DatePickerPlugin.tsx

@@ -19,9 +19,9 @@ interface Data {
 }
 
 export class DatePickerPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-date";
+  public tagName = "marimo-date";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.string(),
     label: z.string().nullable(),
     start: z.string(),
@@ -31,7 +31,7 @@ export class DatePickerPlugin implements IPlugin<T, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <DatePickerComponent
         {...props.data}

package/src/plugins/impl/DateRangePlugin.tsx

@@ -19,9 +19,9 @@ interface Data {
 }
 
 export class DateRangePickerPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-date-range";
+  public tagName = "marimo-date-range";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.tuple([z.string(), z.string()]),
     label: z.string().nullable(),
     start: z.string(),
@@ -31,7 +31,7 @@ export class DateRangePickerPlugin implements IPlugin<T, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <DateRangePickerComponent
         {...props.data}

package/src/plugins/impl/DateTimePickerPlugin.tsx

@@ -20,9 +20,9 @@ interface Data {
 }
 
 export class DateTimePickerPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-datetime";
+  public tagName = "marimo-datetime";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.string(),
     label: z.string().nullable(),
     start: z.string(),
@@ -33,7 +33,7 @@ export class DateTimePickerPlugin implements IPlugin<T, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <DateTimePickerComponent
         {...props.data}

package/src/plugins/impl/DictPlugin.tsx

@@ -18,14 +18,14 @@ interface Data {
 }
 
 export class DictPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-dict";
+  public tagName = "marimo-dict";
 
-  validator = z.object({
+  public validator = z.object({
     label: z.string().nullable(),
     elementIds: z.record(z.string(), z.string()),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <Dict {...props.data} value={props.value} setValue={props.setValue}>
         {props.children}

package/src/plugins/impl/DropdownPlugin.tsx

@@ -17,9 +17,9 @@ interface Data {
 }
 
 export class DropdownPlugin implements IPlugin<string[], Data> {
-  tagName = "marimo-dropdown";
+  public tagName = "marimo-dropdown";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.array(z.string()),
     label: z.string().nullable(),
     options: z.array(z.string()),
@@ -29,7 +29,7 @@ export class DropdownPlugin implements IPlugin<string[], Data> {
     disabled: z.boolean().default(false),
   });
 
-  render(props: IPluginProps<string[], Data>): JSX.Element {
+  public render(props: IPluginProps<string[], Data>): JSX.Element {
     if (props.data.searchable) {
       const value = props.value.length > 0 ? props.value[0] : null;
       const setValue = (newValue: string | null) =>

package/src/plugins/impl/FileUploadPlugin.tsx

@@ -34,9 +34,9 @@ interface Data {
 type T = [string, string][];
 
 export class FileUploadPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-file";
+  public tagName = "marimo-file";
 
-  validator = z.object({
+  public validator = z.object({
     filetypes: z.array(z.string()),
     multiple: z.boolean(),
     kind: z.enum(["button", "area"]),
@@ -44,7 +44,7 @@ export class FileUploadPlugin implements IPlugin<T, Data> {
     max_size: z.number(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <FileUpload
         label={props.data.label}

package/src/plugins/impl/MatrixPlugin.tsx

@@ -23,11 +23,11 @@ interface Data {
 }
 
 export class MatrixPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-matrix";
+  public tagName = "marimo-matrix";
 
-  cssStyles = [matrixCss];
+  public cssStyles = [matrixCss];
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.array(z.array(z.number())),
     label: z.string().nullable(),
     minValue: z.array(z.array(z.number())).nullish(),
@@ -42,7 +42,7 @@ export class MatrixPlugin implements IPlugin<T, Data> {
     disabled: z.array(z.array(z.boolean())),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <MatrixComponent
         {...props.data}

package/src/plugins/impl/MicrophonePlugin.tsx

@@ -18,13 +18,13 @@ interface Data {
 }
 
 export class MicrophonePlugin implements IPlugin<Value, Data> {
-  tagName = "marimo-microphone";
+  public tagName = "marimo-microphone";
 
-  validator = z.object({
+  public validator = z.object({
     label: z.string().nullish(),
   });
 
-  render(props: IPluginProps<Value, Data>): JSX.Element {
+  public render(props: IPluginProps<Value, Data>): JSX.Element {
     return <Microphone {...props} />;
   }
 }

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -17,9 +17,9 @@ interface Data {
 type T = string[];
 
 export class MultiselectPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-multiselect";
+  public tagName = "marimo-multiselect";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.array(z.string()),
     label: z.string().nullable(),
     options: z.array(z.string()),
@@ -28,7 +28,7 @@ export class MultiselectPlugin implements IPlugin<T, Data> {
     disabled: z.boolean().default(false),
   });
 
-  render(props: IPluginProps<string[], Data>): JSX.Element {
+  public render(props: IPluginProps<string[], Data>): JSX.Element {
     return (
       <Multiselect
         {...props.data}

package/src/plugins/impl/NumberPlugin.tsx

@@ -20,9 +20,9 @@ interface Data {
 }
 
 export class NumberPlugin implements IPlugin<T | null, Data> {
-  tagName = "marimo-number";
+  public tagName = "marimo-number";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.number().nullish(),
     label: z.string().nullable(),
     start: z.number().nullish(),
@@ -33,7 +33,7 @@ export class NumberPlugin implements IPlugin<T | null, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T | null, Data>): JSX.Element {
+  public render(props: IPluginProps<T | null, Data>): JSX.Element {
     return (
       <NumberComponent
         {...props.data}

package/src/plugins/impl/RadioPlugin.tsx

@@ -25,9 +25,9 @@ interface Data {
 type S = string | null;
 
 export class RadioPlugin implements IPlugin<S, Data> {
-  tagName = "marimo-radio";
+  public tagName = "marimo-radio";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.string().nullable(),
     inline: z.boolean().default(false),
     label: z.string().nullable(),
@@ -35,7 +35,7 @@ export class RadioPlugin implements IPlugin<S, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<S, Data>): JSX.Element {
+  public render(props: IPluginProps<S, Data>): JSX.Element {
     return (
       <Radio {...props.data} value={props.value} setValue={props.setValue} />
     );
@@ -61,8 +61,12 @@ export const Radio = (props: RadioProps): JSX.Element => {
         disabled={props.disabled}
       >
         {props.options.map((option, i) => (
-          <div className="flex items-center space-x-2" key={i}>
-            <RadioGroupItem value={option} id={`${id}-${i.toString()}`} />
+          <div className="flex items-start space-x-2" key={i}>
+            <RadioGroupItem
+              value={option}
+              id={`${id}-${i.toString()}`}
+              className="shrink-0"
+            />
             <Label
               htmlFor={`${id}-${i.toString()}`}
               className="text-sm font-normal"

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -26,9 +26,9 @@ interface Data {
 }
 
 export class RangeSliderPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-range-slider";
+  public tagName = "marimo-range-slider";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.array(z.number()),
     label: z.string().nullable(),
     start: z.number(),
@@ -42,7 +42,7 @@ export class RangeSliderPlugin implements IPlugin<T, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     const valueMap = (sliderValue: number): number => {
       if (props.data.steps && props.data.steps.length > 0) {
         return props.data.steps[sliderValue];

package/src/plugins/impl/RefreshPlugin.tsx

@@ -51,9 +51,9 @@ const zodTimestring = z.string().superRefine((s, ctx) => {
 });
 
 export class RefreshPlugin implements IPlugin<Value, Data> {
-  tagName = "marimo-refresh";
+  public tagName = "marimo-refresh";
 
-  validator = z.object({
+  public validator = z.object({
     options: z
       .array(z.union([zodTimestring, z.number().min(MIN_INTERVAL)]))
       .default([]),
@@ -63,7 +63,7 @@ export class RefreshPlugin implements IPlugin<Value, Data> {
     label: z.string().nullable(),
   });
 
-  render(props: IPluginProps<Value, Data>): JSX.Element {
+  public render(props: IPluginProps<Value, Data>): JSX.Element {
     return <RefreshComponent {...props} />;
   }
 }

package/src/plugins/impl/SliderPlugin.tsx

@@ -31,9 +31,9 @@ interface Data {
 }
 
 export class SliderPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-slider";
+  public tagName = "marimo-slider";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.number(),
     label: z.string().nullable(),
     start: z.number(),
@@ -48,7 +48,7 @@ export class SliderPlugin implements IPlugin<T, Data> {
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     // Create the valueMap function
     const valueMap = (sliderValue: number): number => {
       const { steps } = props.data;

package/src/plugins/impl/SwitchPlugin.tsx

@@ -13,15 +13,15 @@ interface Data {
 }
 
 export class SwitchPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-switch";
+  public tagName = "marimo-switch";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.boolean(),
     label: z.string().nullable(),
     disabled: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return <SwitchComponent {...props} />;
   }
 }

package/src/plugins/impl/TabsPlugin.tsx

@@ -25,15 +25,15 @@ interface Data {
 type T = string;
 
 export class TabsPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-tabs";
+  public tagName = "marimo-tabs";
 
-  validator = z.object({
+  public validator = z.object({
     tabs: z.array(z.string()),
     label: z.string().nullable(),
     orientation: z.enum(["horizontal", "vertical"]).default("horizontal"),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <TabComponent
         {...props.data}

package/src/plugins/impl/TextAreaPlugin.tsx

@@ -25,9 +25,9 @@ interface Data {
 }
 
 export class TextAreaPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-text-area";
+  public tagName = "marimo-text-area";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.string(),
     placeholder: z.string(),
     label: z.string().nullable(),
@@ -39,7 +39,7 @@ export class TextAreaPlugin implements IPlugin<T, Data> {
     fullWidth: z.boolean().default(false),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <TextAreaComponent
         {...props.data}

package/src/plugins/impl/TextInputPlugin.tsx

@@ -33,9 +33,9 @@ interface Data {
 const MASK_PLACEHOLDER = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
 
 export class TextInputPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-text";
+  public tagName = "marimo-text";
 
-  validator = z.object({
+  public validator = z.object({
     initialValue: z.string(),
     placeholder: z.string(),
     label: z.string().nullable(),
@@ -48,7 +48,7 @@ export class TextInputPlugin implements IPlugin<T, Data> {
     passwordHasValue: z.boolean().optional(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     // Force remount on cell re-run so masked state resets cleanly
     const remountKey =
       props.data.kind === "password"

package/src/plugins/impl/__tests__/MatrixPlugin.test.tsx

@@ -54,8 +54,8 @@ beforeEach(() => {
   // like clientX. Polyfill it so fireEvent.pointerDown/Move/Up work.
   // oxlint-disable-next-line typescript/no-explicit-any
   (globalThis as any).PointerEvent = class PointerEvent extends MouseEvent {
-    readonly pointerId: number;
-    constructor(type: string, init: PointerEventInit = {}) {
+    public readonly pointerId: number;
+    public constructor(type: string, init: PointerEventInit = {}) {
       super(type, init);
       this.pointerId = init.pointerId ?? 0;
     }