@marimo-team/islands 0.23.14-dev16 → 0.23.14-dev17

package/dist/{reveal-component-CskA0jHe.js → reveal-component-BFhE2zHY.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-DcTkcjmm.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
-import { a as DEFAULT_SLIDE_TYPE, an as EyeOff, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, ln as Code, on as Expand, ot as Panel, s as SlideSidebar, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-Dc1Ap0mZ.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelGroup, i as DEFAULT_DECK_TRANSITION, lt as PanelResizeHandle, on as EyeOff, s as SlideSidebar, sn as Expand, st as Panel, t as useNotebookCodeAvailable, un as Code } from "./code-visibility-Cb6UrZYv.js";
 import { X as useDebouncedCallback } from "./input-BSdZp5Ng.js";
 import "./toDate-D1Z7ZXWh.js";
 import "./react-dom-BTJzcVJ9.js";
@@ -7245,12 +7245,12 @@ function _temp(e5) {
   };
 }
 var SubslideView = (e5) => {
-  let t = (0, import_compiler_runtime.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a } = e5, o, s, c, l, u, f;
+  let t = (0, import_compiler_runtime.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a } = e5, o, s, c, l, u, ro;
   if (t[0] !== i || t[1] !== r || t[2] !== a || t[3] !== n) {
     let { slideLevel: e6, cumulativeByBlock: io2 } = buildSubslideNotes(n, a);
     s = e6;
     let p2 = n.blocks.some((e7) => e7.cells.some((e8) => r(e8.id)));
-    o = w, f = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
+    o = w, ro = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
       let n2 = e7.cells.map((e8) => r(e8.id) ? i ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellReadOnlyView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slide, {
         cellId: e8.id,
         status: e8.status,
@@ -7264,8 +7264,8 @@ var SubslideView = (e5) => {
         }, t2);
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: n2 }, t2);
-    }), t[0] = i, t[1] = r, t[2] = a, t[3] = n, t[4] = o, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = f;
-  } else o = t[4], s = t[5], c = t[6], l = t[7], u = t[8], f = t[9];
+    }), t[0] = i, t[1] = r, t[2] = a, t[3] = n, t[4] = o, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = ro;
+  } else o = t[4], s = t[5], c = t[6], l = t[7], u = t[8], ro = t[9];
   let io;
   t[11] !== c || t[12] !== l || t[13] !== u ? (io = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: c,
@@ -7273,10 +7273,10 @@ var SubslideView = (e5) => {
     children: u
   }), t[11] = c, t[12] = l, t[13] = u, t[14] = io) : io = t[14];
   let p;
-  t[15] !== f || t[16] !== io ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    className: f,
+  t[15] !== ro || t[16] !== io ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: ro,
     children: io
-  }), t[15] = f, t[16] = io, t[17] = p) : p = t[17];
+  }), t[15] = ro, t[16] = io, t[17] = p) : p = t[17];
   let ao;
   t[18] === s ? ao = t[19] : (ao = s && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesAside, { text: s }), t[18] = s, t[19] = ao);
   let oo;
@@ -7302,7 +7302,7 @@ var ParkedPreviewContent = (e5) => {
     status: n.status,
     output: n.output
   }), t[3] = n.id, t[4] = n.output, t[5] = n.status, t[6] = o) : o = t[6], o;
-}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: ro, mode: p, configWidth: fo, isEditable: po = false }) => {
+}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: f, mode: io, configWidth: fo, isEditable: po = false }) => {
   var _a2, _b2;
   let yo = (0, import_react.useRef)(null), bo = (0, import_react.useRef)(null), { width: So, height: Co } = useSlideDimensions(yo), wo = useFullScreenElement() != null, To = useAtomValue(kioskModeAtom), Eo = (0, import_react.useMemo)(() => To ? [] : [ce], [To]), [Do, Oo] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), ko = useNotebookCodeAvailable(e5), Ao = !isIslands() && ko, jo = u == null ? void 0 : e5[u], Mo = jo ?? e5.at(0), { parkedPreviewCell: No, isHeldEdit: Po, isNoOutputPreview: Fo, heldEditCellId: Io, heldShowsCode: Lo, toggleHeldShowsCode: Ro } = useParkedPreview({
     activeCell: jo,
@@ -7391,14 +7391,14 @@ var ParkedPreviewContent = (e5) => {
     let e6 = bo.current;
     if (!e6) return;
     let t = resolveActiveCellIndex(Go, e6.getIndices());
-    t != null && (ro == null ? void 0 : ro(t));
+    t != null && (f == null ? void 0 : f(t));
   }), $o = useEvent_default((t) => {
     if (!No || u == null || Events.fromInput(t)) return;
     let n = classifyNavKey(t);
     if (n === 0) return;
     t.preventDefault(), t.stopPropagation();
     let i = u + n;
-    i < 0 || i >= e5.length || (ro == null ? void 0 : ro(i));
+    i < 0 || i >= e5.length || (f == null ? void 0 : f(i));
   }), ns = useEvent_default(() => {
     Qo(), triggerResize(bo.current);
   });
@@ -7494,7 +7494,7 @@ var ParkedPreviewContent = (e5) => {
       ]
     })
   });
-  return p === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  return io === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: "flex-1 min-w-0 flex flex-row gap-3",
     children: os
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.14-dev16",
+  "version": "0.23.14-dev17",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/__tests__/column-explorer.test.tsx

@@ -126,3 +126,28 @@ describe("ColumnExplorerPanel header counts", () => {
     expect(screen.queryByText(/hidden/)).not.toBeInTheDocument();
   });
 });
+
+describe("ColumnExplorerPanel visibility actions", () => {
+  const showAll = () => screen.getByRole("button", { name: /Show all/ });
+  const hideAll = () => screen.getByRole("button", { name: /Hide all/ });
+
+  it("disables 'Show all' when every column is visible", () => {
+    renderPanel();
+    expect(showAll()).toBeDisabled();
+    expect(hideAll()).toBeEnabled();
+  });
+
+  it("disables 'Hide all' when every column is hidden", () => {
+    renderPanel({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(showAll()).toBeEnabled();
+    expect(hideAll()).toBeDisabled();
+  });
+
+  it("enables both actions when some columns are hidden", () => {
+    renderPanel({ initiallyHidden: ["cust_age"] });
+    expect(showAll()).toBeEnabled();
+    expect(hideAll()).toBeEnabled();
+  });
+});

package/src/components/data-table/__tests__/column-visibility-dropdown.test.tsx

@@ -21,10 +21,17 @@ beforeAll(() => {
 
 type Row = Record<string, unknown>;
 
+// Select, index, and nameless columns are non-hideable in production
+// (see columns.tsx), so the harness mirrors that to keep visibility counts
+// aligned with the real table.
 const TEST_COLUMNS: ColumnDef<Row>[] = [
-  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
-  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
-  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID, enableHiding: false },
+  {
+    id: INDEX_COLUMN_NAME,
+    accessorKey: INDEX_COLUMN_NAME,
+    enableHiding: false,
+  },
+  { id: "__m_column__0", accessorKey: "__m_column__0", enableHiding: false },
   {
     id: "customer_name",
     accessorKey: "customer_name",
@@ -101,6 +108,7 @@ describe("ColumnVisibilityDropdown", () => {
     renderAndOpen({ initiallyHidden: ["cust_age"] });
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -117,6 +125,7 @@ describe("ColumnVisibilityDropdown", () => {
 
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -132,6 +141,7 @@ describe("ColumnVisibilityDropdown", () => {
     fireEvent.click(getColumnOption("customer_name"));
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -144,6 +154,7 @@ describe("ColumnVisibilityDropdown", () => {
     // Reopen sorts both hidden columns first, preserving table order.
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "customer_name",
       "cust_age",
       "order_total",
@@ -189,6 +200,52 @@ describe("ColumnVisibilityDropdown", () => {
     );
   });
 
+  it("'Hide all' hides every hideable column", () => {
+    renderAndOpen();
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disables 'Hide all' when every column is already hidden", () => {
+    renderAndOpen({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Hide all' leaves non-hideable columns visible", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    const nonHideable = getColumnOption("customer_name");
+    expect(nonHideable).toHaveAttribute("aria-disabled", "true");
+    expect(nonHideable.querySelector(".lucide-eye-off")).toBeNull();
+    // Every hideable column is now hidden, so the action gates off.
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
   it("hides and shows matching columns via bulk actions while searching", () => {
     renderAndOpen();
     fireEvent.change(getSearchInput(), { target: { value: "cust" } });

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -50,7 +50,10 @@ import {
 import { smartMatch } from "@/utils/smartMatch";
 import type { Column, Table } from "@tanstack/react-table";
 import { cn } from "@/utils/cn";
-import { getColumnCountForDisplay } from "../hooks/use-column-visibility";
+import {
+  getColumnCountForDisplay,
+  getUserColumnVisibilityCounts,
+} from "../hooks/use-column-visibility";
 
 interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
@@ -90,6 +93,7 @@ export function ColumnExplorerPanel<TData>({
     totalColumns: effectiveTotalColumns,
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
+  const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,
@@ -108,17 +112,34 @@ export function ColumnExplorerPanel<TData>({
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
           className="h-3 w-3"
         />
-        {hiddenColumnCount > 0 && (
-          <Button
-            type="button"
-            variant="link"
-            size="xs"
-            className="h-auto p-0"
-            onClick={() => table.resetColumnVisibility(true)}
-          >
-            Unhide all
-          </Button>
-        )}
+        <div className="ml-auto flex items-center gap-1">
+          <Tooltip content="Show all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={hiddenColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(true)}
+            >
+              <EyeIcon className="w-3 h-3" />
+              Show all
+            </Button>
+          </Tooltip>
+          <Tooltip content="Hide all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={visibleColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(false)}
+            >
+              <EyeOffIcon className="w-3 h-3" />
+              Hide all
+            </Button>
+          </Tooltip>
+        </div>
       </div>
       <Command className="h-5/6 bg-background" shouldFilter={false}>
         <CommandInput

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -59,6 +59,12 @@ export const ColumnVisibilityDropdown = <TData,>({
   const hiddenIds = userColumns
     .filter((column) => !column.getIsVisible())
     .map((column) => column.id);
+  const hideableIds = userColumns
+    .filter((column) => column.getCanHide())
+    .map((column) => column.id);
+  const visibleHideableCount = hideableIds.filter(
+    (id) => !hiddenIds.includes(id),
+  ).length;
 
   const applyHidden = (next: string[] | string | null) => {
     const hidden = new Set(Array.isArray(next) ? next : []);
@@ -127,6 +133,15 @@ export const ColumnVisibilityDropdown = <TData,>({
                   <EyeIcon className="w-3 h-3 mr-1.5" />
                   Show all
                 </CommandItem>
+                <CommandItem
+                  value="__hide_all__"
+                  disabled={visibleHideableCount === 0}
+                  onSelect={() => applyHidden(hideableIds)}
+                  className="cursor-pointer"
+                >
+                  <EyeOffIcon className="w-3 h-3 mr-1.5" />
+                  Hide all
+                </CommandItem>
                 <CommandSeparator />
               </>
             ) : (