@marimo-team/frontend 0.25.3-dev129 → 0.25.3-dev134

package/src/plugins/impl/data-frames/__tests__/sidebar.test.tsx

@@ -0,0 +1,160 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Sidebar, TransformPanel } from "../panel";
+import { type TransformType, TransformTypeSchema } from "../schema";
+
+const transform: TransformType = { type: "select_columns", column_ids: [] };
+
+it("selects and deletes transforms through independent buttons", () => {
+  const onSelect = vi.fn();
+  const onDelete = vi.fn();
+  render(
+    <Sidebar
+      items={[{ id: "first", transform }]}
+      selected={0}
+      onSelect={onSelect}
+      onDelete={onDelete}
+      onAdd={vi.fn()}
+    />,
+  );
+  const select = screen.getByRole("button", { name: "Select Columns" });
+  expect(select).toHaveAttribute("aria-pressed", "true");
+  fireEvent.click(select);
+  expect(onSelect).toHaveBeenCalledExactlyOnceWith(0);
+  const remove = screen.getByRole("button", {
+    name: "Delete Select Columns transform 1",
+  });
+  remove.focus();
+  expect(remove).toHaveFocus();
+  fireEvent.click(remove);
+  expect(onDelete).toHaveBeenCalledExactlyOnceWith(0);
+  expect(onSelect).toHaveBeenCalledOnce();
+});
+
+it("preserves focused rows across value edits and removal of earlier duplicates", () => {
+  const first = { id: "first", transform };
+  const second = { id: "second", transform };
+  const props = {
+    selected: 1,
+    onSelect: vi.fn(),
+    onDelete: vi.fn(),
+    onAdd: vi.fn(),
+  };
+  const { rerender } = render(<Sidebar {...props} items={[first, second]} />);
+  const focused = screen.getAllByRole("button", { name: "Select Columns" })[1];
+  act(() => focused.focus());
+  const edited = {
+    ...second,
+    transform: TransformTypeSchema.parse({
+      ...transform,
+      column_ids: ["name"],
+    }),
+  };
+  rerender(<Sidebar {...props} items={[first, edited]} />);
+  expect(screen.getAllByRole("button", { name: "Select Columns" })[1]).toBe(
+    focused,
+  );
+  expect(focused).toHaveFocus();
+
+  rerender(<Sidebar {...props} items={[edited]} selected={0} />);
+  expect(screen.getByRole("button", { name: "Select Columns" })).toBe(focused);
+  expect(focused).toHaveFocus();
+  fireEvent.click(focused);
+  expect(props.onSelect).toHaveBeenLastCalledWith(0);
+});
+
+it.each([
+  { count: 3, removed: 0, destination: 1 },
+  { count: 3, removed: 1, destination: 0 },
+  { count: 3, removed: 2, destination: 1 },
+  { count: 1, removed: 0, destination: undefined },
+])(
+  "moves focus after deleting row $removed of $count",
+  ({ count, removed, destination }) => {
+    function Example() {
+      const [items, setItems] = useState(
+        Array.from({ length: count }, (_, index) => ({
+          id: `transform-${index}`,
+          transform,
+        })),
+      );
+      return (
+        <Sidebar
+          items={items}
+          selected={undefined}
+          onSelect={vi.fn()}
+          onDelete={(index) =>
+            setItems((current) => current.filter((_, i) => i !== index))
+          }
+          onAdd={vi.fn()}
+        />
+      );
+    }
+    render(<Example />);
+    const selectButtons = screen.getAllByRole("button", {
+      name: "Select Columns",
+    });
+    const target =
+      destination === undefined
+        ? screen.getByRole("button", { name: "Add" })
+        : selectButtons[destination];
+    const remove = screen.getByRole("button", {
+      name: `Delete Select Columns transform ${removed + 1}`,
+    });
+    act(() => remove.focus());
+    fireEvent.click(remove, { detail: 0 });
+    expect(remove).not.toBeInTheDocument();
+    expect(target).toHaveFocus();
+  },
+);
+
+it("uses persistent field-array IDs in the transformation panel", () => {
+  render(
+    <TooltipProvider>
+      <TransformPanel
+        initialValue={{ transforms: [transform, transform] }}
+        columns={new Map()}
+        lazy={true}
+        onChange={vi.fn()}
+        onInvalidChange={vi.fn()}
+        getColumnValues={async () => ({ values: [], too_many_values: false })}
+      />
+    </TooltipProvider>,
+  );
+  const survivor = screen.getAllByRole("button", { name: "Select Columns" })[1];
+  const remove = screen.getByRole("button", {
+    name: "Delete Select Columns transform 1",
+  });
+  act(() => remove.focus());
+  fireEvent.click(remove, { detail: 0 });
+  expect(screen.getByRole("button", { name: "Select Columns" })).toBe(survivor);
+  expect(survivor).toHaveFocus();
+  expect(survivor).toHaveAttribute("aria-pressed", "true");
+});
+
+it("does not move focus when deletion starts outside the focused row", () => {
+  render(
+    <>
+      <input aria-label="Transform setting" />
+      <Sidebar
+        items={[{ id: "first", transform }]}
+        selected={0}
+        onSelect={vi.fn()}
+        onDelete={vi.fn()}
+        onAdd={vi.fn()}
+      />
+    </>,
+  );
+  const input = screen.getByRole("textbox", { name: "Transform setting" });
+  act(() => input.focus());
+  fireEvent.click(
+    screen.getByRole("button", {
+      name: "Delete Select Columns transform 1",
+    }),
+  );
+  expect(input).toHaveFocus();
+});

package/src/plugins/impl/data-frames/panel.tsx

@@ -25,6 +25,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
 } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import useEvent from "react-use-event-hook";
@@ -187,7 +188,10 @@ export const TransformPanel: React.FC<Props> = ({
           className="relative flex flex-row max-h-[400px] overflow-hidden bg-background"
         >
           <Sidebar
-            items={form.watch("transforms")}
+            items={transformsField.fields.map((field, index) => ({
+              id: field.id,
+              transform: transforms[index],
+            }))}
             selected={selectedTransform}
             onSelect={(index) => {
               setSelectedTransform(index);
@@ -274,7 +278,7 @@ export const TransformPanel: React.FC<Props> = ({
 };
 
 interface SidebarProps {
-  items: TransformType[];
+  items: { id: string; transform: TransformType }[];
   selected: number | undefined;
   onSelect: (index: number) => void;
   onDelete: (index: number) => void;
@@ -288,34 +292,56 @@ export const Sidebar: React.FC<SidebarProps> = ({
   onSelect,
   onDelete,
 }) => {
+  const selectionButtons = useRef(new Map<string, HTMLButtonElement>());
+  const addButton = useRef<HTMLButtonElement>(null);
+
   return (
     <div className="flex flex-col overflow-y-hidden w-[180px] shadow-xs h-full">
       <div className="flex flex-col overflow-y-auto grow">
-        {items.map((item, idx) => {
+        {items.map(({ id, transform }, idx) => {
           return (
             <div
-              key={`${JSON.stringify(item)}-${idx}`}
-              onClick={() => {
-                onSelect(idx);
-              }}
+              key={id}
               className={cn(
-                "flex flex-row min-h-[40px] items-center px-2 cursor-pointer hover:bg-accent/50 text-sm overflow-hidden hover-actions-parent border border-muted border-l-2 border-l-transparent",
+                "group flex flex-row min-h-[40px] items-center px-2 cursor-pointer hover:bg-accent/50 text-sm overflow-hidden border border-muted border-l-2 border-l-transparent",
                 {
                   "border-l-primary bg-accent text-accent-foreground":
                     selected === idx,
                 },
               )}
             >
-              <div className="grow text-ellipsis">
-                {Strings.startCase(item.type)}
-              </div>
-              <Trash2Icon
-                className="w-3 h-3 hover-action text-muted-foreground hover:text-destructive"
-                onClick={(e) => {
+              <button
+                ref={(button) => {
+                  if (button) {
+                    selectionButtons.current.set(id, button);
+                  } else {
+                    selectionButtons.current.delete(id);
+                  }
+                }}
+                type="button"
+                className="grow text-left text-ellipsis py-2 focus-visible:outline focus-visible:outline-ring"
+                aria-pressed={selected === idx}
+                onClick={() => onSelect(idx)}
+              >
+                {Strings.startCase(transform.type)}
+              </button>
+              <button
+                type="button"
+                aria-label={`Delete ${Strings.startCase(transform.type)} transform ${idx + 1}`}
+                className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 text-muted-foreground hover:text-destructive focus-visible:outline focus-visible:outline-ring"
+                onClick={(event) => {
+                  if (event.currentTarget.matches(":focus")) {
+                    const neighbor = items[idx - 1] ?? items[idx + 1];
+                    const target = neighbor
+                      ? selectionButtons.current.get(neighbor.id)
+                      : addButton.current;
+                    target?.focus();
+                  }
                   onDelete(idx);
-                  e.stopPropagation();
                 }}
-              />
+              >
+                <Trash2Icon className="w-3 h-3" />
+              </button>
             </div>
           );
         })}
@@ -323,6 +349,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
       <div className="flex flex-row shrink-0">
         <AddTransformDropdown onAdd={onAdd}>
           <Button
+            ref={addButton}
             data-testid="marimo-plugin-data-frames-add-transform"
             variant="text"
             className="w-full rounded-none m-0 hover:text-accent-foreground"

package/dist/assets/cell-link-CAjuFcLK.js

@@ -1 +0,0 @@
-import{c as e,l as t,t as n,u as r}from"./useEvent-BDjgaBtz.js";import{D as i,In as a,M as o,P as s,gr as c,xo as l,za as u}from"./cells-BypTg035.js";import{t as d}from"./compiler-runtime-BrajqUja.js";import{p as f}from"./config-CXnC3MRv.js";import{g as p}from"./useEventListener-DPOTkksd.js";import{i as m}from"./utils-B4K466FK.js";import{c as h}from"./session-BHgGkjDm.js";import{T as g,_}from"./config-7IjqNuVp.js";import{t as v}from"./cn-ldLVeaqm.js";import{t as y}from"./jsx-runtime-B74pBk57.js";import{n as b}from"./paths-bkIFVj8h.js";import{b as x}from"./write-secret-modal-CBi2vNK_.js";import{r as S}from"./requests-BIFR-h4M.js";var C=d();function w(){return t(u)}function T(){let t=(0,C.c)(5),[i]=e(_),a=r(u),{openAlert:o}=x(),{sendRename:s}=S(),c;return t[0]!==i.state||t[1]!==o||t[2]!==s||t[3]!==a?(c=async e=>{let t=f();return i.state===g.OPEN?(h(t=>{e===null?t.delete(m.filePath):t.set(m.filePath,e)}),s({filename:e}).then(()=>(a(e),document.title=t.app_title||b.basename(e)||`Untitled Notebook`,e)).catch(e=>(o(e.message),null))):(o(`Failed to save notebook: not connected to a kernel.`),null)},t[0]=i.state,t[1]=o,t[2]=s,t[3]=a,t[4]=c):c=t[4],n(c)}var E=y(),D=e=>{let t=(0,C.c)(12),{className:n,cellId:r,variant:c,onClick:l,formatCellName:u,skipScroll:d}=e,f=s()[r]??``,p=o().inOrderIds.indexOf(r),{showCellIfHidden:m}=i(),h=u??j,g;t[0]===n?g=t[1]:(g=v(`inline-block cursor-pointer text-link hover:underline`,n),t[0]=n,t[1]=g);let _;t[2]!==r||t[3]!==l||t[4]!==m||t[5]!==d||t[6]!==c?(_=e=>{if(r===`__scratch__`)return!1;m({cellId:r}),e.stopPropagation(),e.preventDefault(),requestAnimationFrame(()=>{A(r,c,d)&&l?.()})},t[2]=r,t[3]=l,t[4]=m,t[5]=d,t[6]=c,t[7]=_):_=t[7];let y=h(a(f,p)),b;return t[8]!==g||t[9]!==_||t[10]!==y?(b=(0,E.jsx)(`div`,{className:g,role:`link`,tabIndex:-1,onClick:_,children:y}),t[8]=g,t[9]=_,t[10]=y,t[11]=b):b=t[11],b},O=e=>{let t=(0,C.c)(2),n;return t[0]===e?n=t[1]:(n=(0,E.jsx)(D,{...e,variant:`destructive`}),t[0]=e,t[1]=n),n},k=e=>{let t=(0,C.c)(10),{cellId:n,lineNumber:r}=e,i=w(),a;t[0]!==n||t[1]!==r?(a=()=>c(n,r),t[0]=n,t[1]=r,t[2]=a):a=t[2];let o;t[3]!==n||t[4]!==i?(o=e=>n===`__scratch__`?`scratch`:`marimo://${i||`untitled`}#cell=${e}`,t[3]=n,t[4]=i,t[5]=o):o=t[5];let s;return t[6]!==n||t[7]!==a||t[8]!==o?(s=(0,E.jsx)(D,{cellId:n,onClick:a,skipScroll:!0,variant:`destructive`,className:`traceback-cell-link`,formatCellName:o}),t[6]=n,t[7]=a,t[8]=o,t[9]=s):s=t[9],s};function A(e,t,n){let r=l.create(e),i=document.getElementById(r),a=i?.classList.contains(`has-error`);return i===null?(p.error(`Cell ${r} not found on page.`),!1):(n||i.scrollIntoView({behavior:`smooth`,block:`center`}),(t===`destructive`||a&&t===void 0)&&(i.classList.add(`error-outline`),setTimeout(()=>{i.classList.remove(`error-outline`)},2e3)),(t===`focus`||!a&&t===void 0)&&(i.classList.add(`focus-outline`),setTimeout(()=>{i.classList.remove(`focus-outline`)},2e3)),!0)}function j(e){return e}export{w as a,A as i,O as n,T as o,k as r,D as t};

package/dist/assets/feedback-button-Bt89tGG2.js

@@ -1 +0,0 @@
-import{n as e}from"./feedback-button-C6asPmsh.js";export{e as FeedbackModal};

package/dist/assets/floating-outline-CRpmOv32.js

@@ -1 +0,0 @@
-import{a as e}from"./rolldown-runtime-B0Z9INg1.js";import{l as t}from"./useEvent-BDjgaBtz.js";import{t as n}from"./react-DVplv7_D.js";import{S as r,ct as i}from"./cells-BypTg035.js";import{t as a}from"./compiler-runtime-BrajqUja.js";import{g as o}from"./useEventListener-DPOTkksd.js";import{d as s}from"./session-BHgGkjDm.js";import{t as c}from"./cn-ldLVeaqm.js";import{t as l}from"./jsx-runtime-B74pBk57.js";var u=a(),d=e(n(),1);function f(){return s()===`edit`?document.getElementById(`App`):void 0}function p(e){let t=(0,u.c)(7),[n,r]=(0,d.useState)(void 0),[a,o]=(0,d.useState)(void 0),s=(0,d.useRef)(null),c=(0,d.useRef)(null),l;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(l=new Map,t[0]=l):l=t[0];let p=(0,d.useRef)(l),h,g;t[1]===e?(h=t[2],g=t[3]):(h=()=>e.length===0?void 0:(s.current=new IntersectionObserver(e=>{let t=!1;if(e.forEach(e=>{let n=e.target;e.isIntersecting?(!c.current||n.getBoundingClientRect().top<c.current.getBoundingClientRect().top)&&(c.current=n,t=!0):n===c.current&&(c.current=null,t=!0)}),t&&c.current){let e=i(c.current),t=`id`in e?e.id:e.path;r(t),o(p.current.get(c.current))}},{root:f(),rootMargin:`0px`,threshold:0}),e.forEach(t=>{if(t){let n=i(t[0]),r=e.map(m).filter(e=>`id`in n?e.id===n.id:e.textContent===t[0].textContent).indexOf(t[0]);p.current.set(t[0],r),s.current?.observe(t[0])}}),()=>{s.current&&s.current.disconnect(),c.current=null}),g=[e],t[1]=e,t[2]=h,t[3]=g),(0,d.useEffect)(h,g);let _;return t[4]!==n||t[5]!==a?(_={activeHeaderId:n,activeOccurrences:a},t[4]=n,t[5]=a,t[6]=_):_=t[6],_}function m(e){let[t]=e;return t}function h(e){if(e.length===0)return[];let t=new Map;return e.map(e=>{let n=`id`in e.by?e.by.id:e.by.path,r=t.get(n)??0;t.set(n,r+1);let i=_(e,r);return i?[i,n]:null}).filter(Boolean)}function g(e,t){let n=_(e,t);if(!n){o.warn(`Could not find element for outline item`,e);return}n.scrollIntoView({behavior:`smooth`,block:`start`}),n.classList.add(`outline-item-highlight`),setTimeout(()=>{n.classList.remove(`outline-item-highlight`)},3e3)}function _(e,t){return`id`in e.by?document.querySelectorAll(`[id="${CSS.escape(e.by.id)}"]`)[t]:document.evaluate(e.by.path,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue}var v=l(),y=()=>{let e=(0,u.c)(19),{items:n}=t(r),i;e[0]===n?i=e[1]:(i=h(n),e[0]=n,e[1]=i);let{activeHeaderId:a,activeOccurrences:o}=p(i),[s,l]=d.useState(!1);if(n.length<2)return null;let f,m,g;e[2]===Symbol.for(`react.memo_cache_sentinel`)?(f=()=>l(!0),m=()=>l(!1),g=c(`fixed top-[25vh] right-8 z-10000 print:hidden`,`hidden md:block`),e[2]=f,e[3]=m,e[4]=g):(f=e[2],m=e[3],g=e[4]);let _=s?`left-[-280px] opacity-100`:`left-[300px] opacity-0`,y;e[5]===_?y=e[6]:(y=c(`-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border`,_),e[5]=_,e[6]=y);let S;e[7]!==a||e[8]!==o||e[9]!==n||e[10]!==y?(S=(0,v.jsx)(x,{className:y,items:n,activeHeaderId:a,activeOccurrences:o}),e[7]=a,e[8]=o,e[9]=n,e[10]=y,e[11]=S):S=e[11];let C;e[12]!==a||e[13]!==o||e[14]!==n?(C=(0,v.jsx)(b,{items:n,activeHeaderId:a,activeOccurrences:o}),e[12]=a,e[13]=o,e[14]=n,e[15]=C):C=e[15];let w;return e[16]!==S||e[17]!==C?(w=(0,v.jsxs)(`div`,{onMouseEnter:f,onMouseLeave:m,className:g,children:[S,C]}),e[16]=S,e[17]=C,e[18]=w):w=e[18],w},b=e=>{let t=(0,u.c)(8),{items:n,activeHeaderId:r,activeOccurrences:i}=e,a,o;if(t[0]!==r||t[1]!==i||t[2]!==n){let e=new Map;a=`flex flex-col gap-4 items-end max-h-[70vh] overflow-hidden`,o=n.map((t,n)=>{let a=`id`in t.by?t.by.id:t.by.path,o=e.get(a)??0;return e.set(a,o+1),(0,v.jsx)(`div`,{className:c(`h-[2px] bg-muted-foreground/60`,t.level===1&&`w-5`,t.level===2&&`w-4`,t.level===3&&`w-3`,t.level===4&&`w-2`,o===i&&r===a&&`bg-foreground`),onClick:()=>g(t,o)},`${a}-${n}`)}),t[0]=r,t[1]=i,t[2]=n,t[3]=a,t[4]=o}else a=t[3],o=t[4];let s;return t[5]!==a||t[6]!==o?(s=(0,v.jsx)(`div`,{className:a,children:o}),t[5]=a,t[6]=o,t[7]=s):s=t[7],s},x=e=>{let t=(0,u.c)(11),{items:n,activeHeaderId:r,activeOccurrences:i,className:a}=e,o,s;if(t[0]!==r||t[1]!==i||t[2]!==a||t[3]!==n){let e=new Map;t[6]===a?o=t[7]:(o=c(`flex flex-col overflow-auto py-4 pl-2`,a),t[6]=a,t[7]=o),s=n.map((t,n)=>{let a=`id`in t.by?t.by.id:t.by.path,o=e.get(a)??0;e.set(a,o+1);let s=`${a}-${n}`,l={className:c(`px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l`,t.level===1&&`font-semibold`,t.level===2&&`ml-3`,t.level===3&&`ml-6`,t.level===4&&`ml-9`,o===i&&r===a&&`text-accent-foreground`),onClick:()=>g(t,o)};return t.html?(0,v.jsx)(`div`,{...l,dangerouslySetInnerHTML:{__html:t.html}},s):(0,v.jsx)(`div`,{...l,children:t.name},s)}),t[0]=r,t[1]=i,t[2]=a,t[3]=n,t[4]=o,t[5]=s}else o=t[4],s=t[5];let l;return t[8]!==o||t[9]!==s?(l=(0,v.jsx)(`div`,{className:o,children:s}),t[8]=o,t[9]=s,t[10]=l):l=t[10],l};export{p as i,x as n,h as r,y as t};