@marimo-team/islands 0.22.1-dev4 → 0.22.1-dev7

package/dist/main.js

@@ -33496,8 +33496,8 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   function _temp2$23(e, r) {
     return e + r;
   }
-  const TableBottomBar = ({ pagination: e, totalColumns: r, selection: c, onRowSelectionChange: d, table: f, getRowIds: h, showPageSizeSelector: _, tableLoading: v }) => {
-    let { locale: S } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), w = (e2) => {
+  const TableBottomBar = ({ pagination: e, totalColumns: r, selection: c, onRowSelectionChange: d, table: f, getRowIds: h, showPageSizeSelector: _, tableLoading: v, part: S }) => {
+    let { locale: w } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), E = (e2) => {
       if (!d) return;
       if (!e2) {
         d({});
@@ -33532,6 +33532,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       });
     };
     return (0, import_jsx_runtime.jsxs)("div", {
+      part: S,
       className: "flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0 pt-1",
       children: [
         (0, import_jsx_runtime.jsxs)("div", {
@@ -33540,12 +33541,12 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
             (0, import_jsx_runtime.jsx)("div", {
               className: "flex items-center gap-1",
               children: (() => {
-                let { rowSelection: e2, cellSelection: d2 } = f.getState(), h2 = Object.keys(e2).length, _2 = f.getIsAllPageRowsSelected(), v2 = f.getRowCount(), y = h2 === v2, E = c === "single-cell" || c === "multi-cell";
-                return E && (h2 = d2.length, _2 = false, y = false), _2 && !y ? (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+                let { rowSelection: e2, cellSelection: d2 } = f.getState(), h2 = Object.keys(e2).length, _2 = f.getIsAllPageRowsSelected(), v2 = f.getRowCount(), y = h2 === v2, S2 = c === "single-cell" || c === "multi-cell";
+                return S2 && (h2 = d2.length, _2 = false, y = false), _2 && !y ? (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
                   children: [
                     (0, import_jsx_runtime.jsxs)("span", {
                       children: [
-                        prettyNumber(h2, S),
+                        prettyNumber(h2, w),
                         " selected"
                       ]
                     }),
@@ -33555,10 +33556,10 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
                       variant: "link",
                       className: "h-4 print:hidden",
                       onMouseDown: Events.preventFocus,
-                      onClick: () => w(true),
+                      onClick: () => E(true),
                       children: [
                         "Select all ",
-                        prettyNumber(v2, S)
+                        prettyNumber(v2, w)
                       ]
                     })
                   ]
@@ -33566,7 +33567,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
                   children: [
                     (0, import_jsx_runtime.jsxs)("span", {
                       children: [
-                        prettyNumber(h2, S),
+                        prettyNumber(h2, w),
                         " selected"
                       ]
                     }),
@@ -33577,13 +33578,13 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
                       className: "h-4 print:hidden",
                       onMouseDown: Events.preventFocus,
                       onClick: () => {
-                        E ? f.resetCellSelection && f.resetCellSelection() : w(false);
+                        S2 ? f.resetCellSelection && f.resetCellSelection() : E(false);
                       },
                       children: "Clear selection"
                     })
                   ]
                 }) : (0, import_jsx_runtime.jsx)("span", {
-                  children: prettifyRowColumnCount(f.getRowCount(), r, S)
+                  children: prettifyRowColumnCount(f.getRowCount(), r, w)
                 });
               })()
             }),
@@ -34202,6 +34203,7 @@ Defaulting to \`null\`.`;
         (0, import_jsx_runtime.jsxs)(CellSelectionProvider, {
           children: [
             (0, import_jsx_runtime.jsxs)("div", {
+              part: "table-wrapper",
               className: cn(r || "rounded-md border overflow-hidden"),
               children: [
                 (0, import_jsx_runtime.jsx)(TableTopBar, {
@@ -34238,6 +34240,7 @@ Defaulting to \`null\`.`;
               ]
             }),
             (0, import_jsx_runtime.jsx)(TableBottomBar, {
+              part: "table-footer",
               totalColumns: v,
               pagination: e9,
               selection: _,
@@ -36436,6 +36439,7 @@ ${E}`,
     }), r[5] = h, r[6] = w);
     let E;
     r[7] !== y || r[8] !== w ? (E = (0, import_jsx_runtime.jsx)("div", {
+      part: "table-wrapper",
       className: y,
       children: w
     }), r[7] = y, r[8] = w, r[9] = E) : E = r[9];
@@ -43990,68 +43994,71 @@ ${c}
     return r ? r.length > 0 : false;
   }
   var import_compiler_runtime$69 = require_compiler_runtime(), NEW_CHART_TYPE = "bar", DEFAULT_TAB_NAME = "table", CHART_HEIGHT = 290, CHART_MAX_ROWS = 5e4, CHART_MAX_COLUMNS = 50;
-  const TablePanel = (e) => {
-    let r = (0, import_compiler_runtime$69.c)(7), { cellId: c, data: d, dataTable: f, totalRows: h, columns: _, getDataUrl: v, fieldTypes: y, displayHeader: S } = e, [w, E] = useAtom(tabsStorageAtom), O = c ? w.get(c) ?? [] : [], [M, I] = (0, import_react.useState)(0), [z, G] = (0, import_react.useState)(DEFAULT_TAB_NAME);
-    if (!S || O.length === 0 && !S) return f;
+  const TablePanel = ({ cellId: e, data: r, dataTable: c, totalRows: d, columns: f, getDataUrl: h, fieldTypes: _, displayHeader: v, onCloseChartBuilder: y }) => {
+    let [S, w] = useAtom(tabsStorageAtom), E = e ? S.get(e) ?? [] : [], [O, M] = (0, import_react.useState)(DEFAULT_TAB_NAME), [I, z] = (0, import_react.useState)(E.length), G = (0, import_react.useRef)(v);
+    if (v && !G.current && E.length === 0 && e) {
+      G.current = v;
+      let r2 = getChartTabName(0, NEW_CHART_TYPE), c2 = new Map(S);
+      c2.set(e, [
+        {
+          tabName: r2,
+          chartType: NEW_CHART_TYPE,
+          config: getChartDefaults()
+        }
+      ]), w(c2), z(1), M(r2);
+    }
+    if (G.current = v, !v || E.length === 0 && !v) return c;
     let q = () => {
-      if (!c) return;
-      let e2 = getChartTabName(M, NEW_CHART_TYPE), r2 = new Map(w);
-      r2.set(c, [
-        ...O,
+      if (!e) return;
+      let r2 = getChartTabName(I, NEW_CHART_TYPE), c2 = new Map(S);
+      c2.set(e, [
+        ...E,
         {
-          tabName: e2,
+          tabName: r2,
           chartType: NEW_CHART_TYPE,
           config: getChartDefaults()
         }
-      ]), E(r2), I(M + 1), G(e2);
-    }, Z7 = (e2) => {
-      if (!c) return;
-      let r2 = new Map(w);
-      r2.set(c, O.filter((r3) => r3.tabName !== e2)), E(r2), G(DEFAULT_TAB_NAME), I(M - 1);
-    }, Q7 = (e2) => {
-      let { tabName: r2, chartType: d2, chartConfig: f2 } = e2;
-      if (!c) return;
-      let h2 = new Map(w);
-      h2.set(c, O.map((e3) => e3.tabName === r2 ? {
-        ...e3,
-        chartType: d2,
-        config: f2
-      } : e3)), E(h2);
-    }, $7;
-    r[0] !== c || r[1] !== E || r[2] !== w ? ($7 = (e2, r2) => {
-      if (!c) return;
-      let d2 = w.get(c) ?? [], f2 = d2.findIndex((r3) => r3.tabName === e2);
+      ]), w(c2), z(I + 1), M(r2);
+    }, Z7 = (r2) => {
+      if (!e) return;
+      let c2 = E.findIndex((e2) => e2.tabName === r2), d2 = E.filter((e2) => e2.tabName !== r2), f2 = new Map(S);
+      f2.set(e, d2), w(f2), d2.length === 0 ? y == null ? void 0 : y() : r2 === O && (c2 < d2.length ? M(d2[c2].tabName) : M(d2[d2.length - 1].tabName));
+    }, Q7 = ({ tabName: r2, chartType: c2, chartConfig: d2 }) => {
+      if (!e) return;
+      let f2 = new Map(S);
+      f2.set(e, E.map((e2) => e2.tabName === r2 ? {
+        ...e2,
+        chartType: c2,
+        config: d2
+      } : e2)), w(f2);
+    }, $7 = (r2, c2) => {
+      if (!e) return;
+      let d2 = S.get(e) ?? [], f2 = d2.findIndex((e2) => e2.tabName === r2);
       if (f2 === -1) return;
-      let h2 = d2.map((c2) => c2.tabName === e2 ? {
-        ...c2,
-        chartType: r2,
-        tabName: getChartTabName(f2, r2)
-      } : c2);
-      E(new Map(w).set(c, h2)), G(h2[f2].tabName);
-    }, r[0] = c, r[1] = E, r[2] = w, r[3] = $7) : $7 = r[3];
-    let e9 = $7, t9 = h === "too_many" || h > CHART_MAX_ROWS || _ > CHART_MAX_COLUMNS, n9;
-    r[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n9 = (0, import_jsx_runtime.jsx)(TabsTrigger, {
-      className: "text-xs",
-      value: DEFAULT_TAB_NAME,
-      onClick: () => G(DEFAULT_TAB_NAME),
-      children: "Table"
-    }), r[4] = n9) : n9 = r[4];
-    let r9;
-    return r[5] === f ? r9 = r[6] : (r9 = (0, import_jsx_runtime.jsx)(TabsContent, {
-      className: "mt-1 overflow-hidden",
-      value: DEFAULT_TAB_NAME,
-      children: f
-    }), r[5] = f, r[6] = r9), (0, import_jsx_runtime.jsxs)(Tabs, {
-      value: z,
+      let h2 = d2.map((e2) => e2.tabName === r2 ? {
+        ...e2,
+        chartType: c2,
+        tabName: getChartTabName(f2, c2)
+      } : e2);
+      w(new Map(S).set(e, h2)), M(h2[f2].tabName);
+    }, e9 = d === "too_many" || d > CHART_MAX_ROWS || f > CHART_MAX_COLUMNS;
+    return (0, import_jsx_runtime.jsxs)(Tabs, {
+      value: O,
       className: "-mt-1",
       children: [
         (0, import_jsx_runtime.jsxs)(TabsList, {
+          part: "table-tabs",
           children: [
-            n9,
-            O.map((e2, r2) => (0, import_jsx_runtime.jsxs)(TabsTrigger, {
+            (0, import_jsx_runtime.jsx)(TabsTrigger, {
+              className: "text-xs",
+              value: DEFAULT_TAB_NAME,
+              onClick: () => M(DEFAULT_TAB_NAME),
+              children: "Table"
+            }),
+            E.map((e2, r2) => (0, import_jsx_runtime.jsxs)(TabsTrigger, {
               className: "text-xs",
               value: e2.tabName,
-              onClick: () => G(e2.tabName),
+              onClick: () => M(e2.tabName),
               children: [
                 e2.tabName,
                 (0, import_jsx_runtime.jsx)(X, {
@@ -44071,29 +44078,33 @@ ${c}
             })
           ]
         }),
-        r9,
-        O.map((e2, r2) => (0, import_jsx_runtime.jsx)(TabsContent, {
+        (0, import_jsx_runtime.jsx)(TabsContent, {
+          className: "mt-1 overflow-hidden",
+          value: DEFAULT_TAB_NAME,
+          children: c
+        }),
+        E.map((e2, d2) => (0, import_jsx_runtime.jsx)(TabsContent, {
           value: e2.tabName,
           className: "h-[400px] mt-1",
           children: (0, import_jsx_runtime.jsx)(ChartPanel, {
-            tableData: d,
+            tableData: r,
             chartConfig: e2.config,
             chartType: e2.chartType,
-            saveChart: (r3) => {
+            saveChart: (r2) => {
               Q7({
                 tabName: e2.tabName,
                 chartType: e2.chartType,
-                chartConfig: r3
+                chartConfig: r2
               });
             },
-            saveChartType: (r3) => {
-              e9(e2.tabName, r3);
+            saveChartType: (r2) => {
+              $7(e2.tabName, r2);
             },
-            getDataUrl: v,
-            fieldTypes: y ?? inferFieldTypes(f.props.data),
-            isLargeDataset: t9
+            getDataUrl: h,
+            fieldTypes: _ ?? inferFieldTypes(c.props.data),
+            isLargeDataset: e9
           })
-        }, r2))
+        }, d2))
       ]
     });
   };
@@ -45918,6 +45929,7 @@ ${c}
     let j9 = A9, M9;
     r[91] !== d || r[92] !== j9 || r[93] !== (o9 == null ? void 0 : o9.rows) || r[94] !== Z7 || r[95] !== e.fieldTypes || r[96] !== e.get_data_url || r[97] !== e.showChartBuilder || r[98] !== e.totalColumns || r[99] !== e.totalRows ? (M9 = e.showChartBuilder ? (0, import_jsx_runtime.jsx)(TablePanel, {
       displayHeader: Z7,
+      onCloseChartBuilder: () => Q7(false),
       data: (o9 == null ? void 0 : o9.rows) || [],
       columns: e.totalColumns,
       totalRows: e.totalRows,
@@ -65415,7 +65427,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.1-dev4"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.1-dev7"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {