@marimo-team/islands 0.22.5-dev13 → 0.22.5-dev15

package/dist/main.js

@@ -28187,53 +28187,68 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }
   }
   var TOP_K_ROWS = 30;
-  const DataTableColumnHeader = ({ column: e, header: r, justify: c, className: d, calculateTopKRows: f, table: h }) => {
+  const DataTableColumnHeader = ({ column: e, header: r, subheader: c, className: d, calculateTopKRows: f, table: h }) => {
     let [_, v] = (0, import_react.useState)(false), { locale: y } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
     if (!r) return null;
-    if (!e.getCanSort() && !e.getCanFilter()) return (0, import_jsx_runtime.jsx)("div", {
+    if (!e.getCanSort() && !e.getCanFilter()) return (0, import_jsx_runtime.jsxs)("div", {
       className: cn(d),
-      children: r
+      children: [
+        r,
+        c
+      ]
     });
-    let S = e.getFilterValue() !== void 0, w = !e.getIsSorted() && !S;
+    let S = e.getFilterValue() !== void 0;
     return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
-        (0, import_jsx_runtime.jsxs)(DropdownMenu, {
-          modal: false,
+        (0, import_jsx_runtime.jsxs)("div", {
+          className: cn("group flex flex-col my-1 w-full select-none", d),
           children: [
-            (0, import_jsx_runtime.jsx)(DropdownMenuTrigger, {
-              asChild: true,
-              children: (0, import_jsx_runtime.jsxs)("div", {
-                className: cn("group flex items-center my-1 space-between w-full select-none gap-2 border hover:border-border border-transparent hover:bg-(--slate-3) data-[state=open]:bg-(--slate-3) data-[state=open]:border-border rounded px-1 -mx-1", c === "right" && "flex-row-reverse", d),
-                "data-testid": "data-table-sort-button",
-                children: [
-                  (0, import_jsx_runtime.jsx)("span", {
-                    className: "flex-1",
-                    children: r
-                  }),
-                  (0, import_jsx_runtime.jsx)("span", {
-                    className: cn("h-5 py-1 px-1", w && "invisible group-hover:visible data-[state=open]:visible"),
-                    children: renderSortFilterIcon(e)
-                  })
-                ]
-              })
-            }),
-            (0, import_jsx_runtime.jsxs)(DropdownMenuContent, {
-              align: "start",
+            (0, import_jsx_runtime.jsxs)("div", {
+              className: "flex items-center gap-1",
               children: [
-                renderDataType(e),
-                renderSorts(e, h),
-                renderCopyColumn(e),
-                renderColumnPinning(e),
-                renderColumnWrapping(e),
-                renderFormatOptions(e, y),
-                (0, import_jsx_runtime.jsx)(DropdownMenuSeparator, {}),
-                renderMenuItemFilter(e),
-                renderFilterByValues(e, v),
-                S && (0, import_jsx_runtime.jsx)(ClearFilterMenuItem, {
+                (0, import_jsx_runtime.jsx)("span", {
+                  children: r
+                }),
+                e.getCanSort() && (0, import_jsx_runtime.jsx)(SortButton, {
                   column: e
+                }),
+                (0, import_jsx_runtime.jsxs)(DropdownMenu, {
+                  modal: false,
+                  children: [
+                    (0, import_jsx_runtime.jsx)(DropdownMenuTrigger, {
+                      asChild: true,
+                      children: (0, import_jsx_runtime.jsx)("button", {
+                        type: "button",
+                        className: "inline-flex items-center justify-center h-5 w-5 rounded hover:bg-(--slate-4) text-muted-foreground opacity-0 group-hover:opacity-100 focus:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-accent-foreground",
+                        "aria-label": "Column options",
+                        "data-testid": "data-table-column-menu-button",
+                        children: (0, import_jsx_runtime.jsx)(Ellipsis, {
+                          className: "h-3.5 w-3.5"
+                        })
+                      })
+                    }),
+                    (0, import_jsx_runtime.jsxs)(DropdownMenuContent, {
+                      align: "start",
+                      children: [
+                        renderDataType(e),
+                        renderSorts(e, h),
+                        renderCopyColumn(e),
+                        renderColumnPinning(e),
+                        renderColumnWrapping(e),
+                        renderFormatOptions(e, y),
+                        (0, import_jsx_runtime.jsx)(DropdownMenuSeparator, {}),
+                        renderMenuItemFilter(e),
+                        renderFilterByValues(e, v),
+                        S && (0, import_jsx_runtime.jsx)(ClearFilterMenuItem, {
+                          column: e
+                        })
+                      ]
+                    })
+                  ]
                 })
               ]
-            })
+            }),
+            c
           ]
         }),
         _ && (0, import_jsx_runtime.jsx)(PopoverFilterByValues, {
@@ -28244,6 +28259,19 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     });
   };
+  var SortButton = ({ column: e }) => {
+    let r = e.getIsSorted();
+    return (0, import_jsx_runtime.jsx)("button", {
+      type: "button",
+      onClick: (c) => {
+        c.stopPropagation(), r ? r === "asc" ? e.toggleSorting(true, true) : e.clearSorting() : e.toggleSorting(false, true);
+      },
+      className: cn("inline-flex items-center justify-center h-5 w-5 rounded hover:bg-(--slate-4)", r ? "text-accent-foreground" : "text-muted-foreground opacity-0 group-hover:opacity-100 focus:opacity-100 group-focus-within:opacity-100"),
+      "aria-label": r === "asc" ? "Sorted ascending, click to sort descending" : r === "desc" ? "Sorted descending, click to clear sort" : "Sort column ascending",
+      "data-testid": "data-table-sort-button",
+      children: renderSortFilterIcon(e)
+    });
+  };
   function renderMenuItemFilter(e) {
     var _a3;
     if (!e.getCanFilter()) return null;
@@ -30301,30 +30329,24 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
               ]
             })
           ]
-        }) : null, O2 = M(e2), I2 = (0, import_jsx_runtime.jsxs)("div", {
-          className: cn("flex flex-col", O2 === "center" && "items-center", O2 === "right" && "items-end"),
-          children: [
-            (0, import_jsx_runtime.jsx)("span", {
-              className: cn("font-bold", S2 && "underline decoration-dotted"),
-              children: e2 === "" ? " " : e2
-            }),
-            E2
-          ]
-        }), z2 = (0, import_jsx_runtime.jsx)(DataTableColumnHeader, {
+        }) : null, O2 = (0, import_jsx_runtime.jsx)("span", {
+          className: cn("font-bold", S2 && "underline decoration-dotted"),
+          children: e2 === "" ? " " : e2
+        }), M2 = (0, import_jsx_runtime.jsx)(DataTableColumnHeader, {
           header: S2 ? (0, import_jsx_runtime.jsx)(Tooltip, {
             content: S2,
             delayDuration: 300,
-            children: I2
-          }) : I2,
+            children: O2
+          }) : O2,
+          subheader: E2,
           column: r2,
-          justify: O2,
           calculateTopKRows: y,
           table: c3
         });
-        return w.has(e2) ? z2 : (0, import_jsx_runtime.jsxs)("div", {
-          className: cn("flex flex-col h-full pt-0.5 pb-3 justify-between items-start", O2 === "center" && "items-center", O2 === "right" && "items-end"),
+        return w.has(e2) ? M2 : (0, import_jsx_runtime.jsxs)("div", {
+          className: cn("flex flex-col h-full pt-0.5 pb-3 justify-between items-start"),
           children: [
-            z2,
+            M2,
             (0, import_jsx_runtime.jsx)(TableColumnSummary, {
               columnId: e2
             })
@@ -30342,7 +30364,13 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
           renderValue: d2,
           getValue: f2,
           selectCell: v2,
-          cellStyles: getCellStyleClass(y2, S2, O2, E2, I2 === "number" || I2 === "integer")
+          cellStyles: getCellStyleClass({
+            justify: y2,
+            wrapped: S2,
+            canSelectCell: O2,
+            isSelected: E2,
+            isNumeric: I2 === "number" || I2 === "integer"
+          })
         });
         return w.has(e2) ? (0, import_jsx_runtime.jsx)("b", {
           children: z2
@@ -30443,7 +30471,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
         return;
     }
   }
-  function getCellStyleClass(e, r, c, d, f) {
+  function getCellStyleClass({ justify: e = "left", wrapped: r, canSelectCell: c, isSelected: d, isNumeric: f = false }) {
     return cn(c && "cursor-pointer", d && "relative before:absolute before:inset-0 before:bg-(--blue-3) before:rounded before:-z-10 before:mx-[-4px] before:my-[-2px]", "w-full", "text-left", "truncate", f && "tabular-nums", e === "center" && "text-center", e === "right" && "text-right", r && "whitespace-pre-wrap min-w-[200px] break-words");
   }
   function renderAny(e) {
@@ -33856,7 +33884,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     let c = (r2) => r2.map((r3) => r3.headers.map((r4) => {
       let { className: c2, style: d } = getPinningStyles(r4.column);
       return (0, import_jsx_runtime.jsx)(TableHead, {
-        className: cn("h-auto min-h-10 whitespace-pre align-top", c2),
+        className: cn("h-auto min-h-10 whitespace-pre align-top border-r border-r-border/75", c2),
         style: d,
         ref: (c3) => {
           columnSizingHandler({
@@ -33874,7 +33902,12 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
         children: [
           c(e.getLeftHeaderGroups()),
           c(e.getCenterHeaderGroups()),
-          c(e.getRightHeaderGroups())
+          c(e.getRightHeaderGroups()),
+          e.getAllColumns().length <= 4 && (0, import_jsx_runtime.jsx)("th", {
+            className: "w-full border-0",
+            "aria-hidden": "true",
+            role: "presentation"
+          })
         ]
       })
     });
@@ -33918,7 +33951,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
         tabIndex: 0,
         ...getCellDomProps(e3.id),
         key: e3.id,
-        className: cn("whitespace-pre truncate max-w-[300px] outline-hidden", e3.column.getColumnWrapping && ((_d3 = (_c3 = e3.column).getColumnWrapping) == null ? void 0 : _d3.call(_c3)) === "wrap" && "whitespace-pre-wrap min-w-[200px]", "px-1.5 py-[0.18rem]", r2),
+        className: cn("whitespace-pre truncate max-w-[300px] outline-hidden border-r border-r-border/75", e3.column.getColumnWrapping && ((_d3 = (_c3 = e3.column).getColumnWrapping) == null ? void 0 : _d3.call(_c3)) === "wrap" && "whitespace-pre-wrap min-w-[200px]", "px-1.5 py-[0.18rem]", r2),
         style: d2,
         title: f2,
         onMouseDown: (r3) => E(r3, e3),
@@ -33939,23 +33972,28 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       }
     }, e9 = e.getState().cellHoverTemplate || null, t9 = (e2) => {
       var _a3;
-      let r2 = c ? (d == null ? void 0 : d(e2.original, e2.index)) ?? e2.index : void 0, h2 = c && f === r2, _2;
-      return e9 && (_2 = Z7(e9, ((_a3 = e2.getVisibleCells) == null ? void 0 : _a3.call(e2)) ?? [
+      let h2 = c ? (d == null ? void 0 : d(e2.original, e2.index)) ?? e2.index : void 0, _2 = c && f === h2, v2;
+      return e9 && (v2 = Z7(e9, ((_a3 = e2.getVisibleCells) == null ? void 0 : _a3.call(e2)) ?? [
         ...e2.getLeftVisibleCells(),
         ...e2.getCenterVisibleCells(),
         ...e2.getRightVisibleCells()
       ])), (0, import_jsx_runtime.jsxs)(TableRow, {
         "data-state": e2.getIsSelected() && "selected",
-        title: _2,
-        className: cn("border-t h-6", c && "cursor-pointer", h2 && "bg-(--blue-3) hover:bg-(--blue-3) data-[state=selected]:bg-(--blue-4)"),
+        title: v2,
+        className: cn("border-t h-6", c && "cursor-pointer", _2 && "bg-(--blue-3) hover:bg-(--blue-3) data-[state=selected]:bg-(--blue-4)"),
         onClick: () => $7(e2),
         children: [
           Q7(e2.getLeftVisibleCells()),
           Q7(e2.getCenterVisibleCells()),
-          Q7(e2.getRightVisibleCells())
+          Q7(e2.getRightVisibleCells()),
+          r.length <= 4 && (0, import_jsx_runtime.jsx)("td", {
+            className: "border-0",
+            "aria-hidden": "true",
+            role: "presentation"
+          })
         ]
       }, e2.id);
-    };
+    }, n9 = r.length <= 4, r9 = r.length + (n9 ? 1 : 0);
     return (0, import_jsx_runtime.jsx)(DataTableContextMenu, {
       tableBody: (0, import_jsx_runtime.jsx)(TableBody, {
         onKeyDown: I,
@@ -33964,13 +34002,13 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
           var _a3, _b3;
           if (_.length === 0) return (0, import_jsx_runtime.jsx)(TableRow, {
             children: (0, import_jsx_runtime.jsx)(TableCell, {
-              colSpan: r.length,
+              colSpan: r9,
               className: "h-24 text-center",
               children: "No results."
             })
           });
           if (h) {
-            let e2 = w.getVirtualItems(), c2 = w.getTotalSize();
+            let e2 = w.getVirtualItems(), r2 = w.getTotalSize();
             return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
               children: [
                 ((_a3 = e2[0]) == null ? void 0 : _a3.start) > 0 && (0, import_jsx_runtime.jsx)("tr", {
@@ -33979,17 +34017,17 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
                     height: e2[0].start
                   },
                   children: (0, import_jsx_runtime.jsx)("td", {
-                    colSpan: r.length
+                    colSpan: r9
                   })
                 }),
                 e2.map((e3) => t9(_[e3.index])),
                 e2.length > 0 && (0, import_jsx_runtime.jsx)("tr", {
                   "data-virtual-spacer": "",
                   style: {
-                    height: c2 - (((_b3 = e2.at(-1)) == null ? void 0 : _b3.end) ?? c2)
+                    height: r2 - (((_b3 = e2.at(-1)) == null ? void 0 : _b3.end) ?? r2)
                   },
                   children: (0, import_jsx_runtime.jsx)("td", {
-                    colSpan: r.length
+                    colSpan: r9
                   })
                 })
               ]
@@ -34961,7 +34999,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
                 downloadAs: Q7
               }),
               (0, import_jsx_runtime.jsxs)(Table, {
-                className: "relative",
+                className: cn("relative", d.length <= 4 ? "w-auto" : "w-full"),
                 ref: M9,
                 children: [
                   C9 && (0, import_jsx_runtime.jsx)("thead", {
@@ -65595,7 +65633,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.5-dev13"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.5-dev15"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {