@datawheel/data-explorer 0.3.5 → 0.3.7-rc.1

package/dist/{main.js → main.mjs}

@@ -3026,7 +3026,7 @@ function SideBar(props) {
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
         maxWidth: expanded ? 300 : 54,
         padding: 0,
-        zIndex: 99,
+        zIndex: 9,
         boxSizing: "border-box",
         [t2.fn.smallerThan("md")]: {
           position: "absolute",
@@ -3593,7 +3593,7 @@ function TableFooter(props) {
     {
       p: "md",
       justify: "space-between",
-      align: "flex-end",
+      align: "center",
       direction: { base: "column-reverse", md: "row" },
       gap: "sm"
     },
@@ -4254,7 +4254,7 @@ function TableView({
           sx: {
             position: "relative",
             top: 0,
-            zIndex: 10
+            zIndex: 8
           }
         },
         table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React19__default.createElement(Box, { component: "tr", key: headerGroup.id, sx: { fontWeight: "normal" } }, headerGroup.headers.map((header) => {
@@ -5034,7 +5034,7 @@ function Toolbar({
 }) {
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
-  const smallerThanLg = useMediaQuery(`(max-width: ${theme.breakpoints.lg})`);
+  const smallerThanLg = useMediaQuery(`(max-width: ${theme.breakpoints.lg}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.lg) ? "" : "px"})`);
   const { toolbarConfig } = useSettings();
   const settings = /* @__PURE__ */ React19__default.createElement(
     Flex,
@@ -5164,34 +5164,57 @@ function SuccessResult(props) {
   const tabHandler = useCallback((newTab) => {
     actions2.switchPanel(newTab);
   }, []);
-  return /* @__PURE__ */ React19__default.createElement(Flex, { gap: "xs", direction: "column", w: "100%", className: props.className }, /* @__PURE__ */ React19__default.createElement(Paper, { ref: fullscreen.ref, id: "query-results-success", h: "100%" }, /* @__PURE__ */ React19__default.createElement(
+  return /* @__PURE__ */ React19__default.createElement(
     Flex,
     {
-      sx: (t2) => ({
-        alignItems: "center",
-        background: t2.colorScheme === "dark" ? t2.colors.dark[7] : t2.colors.gray[1],
-        justifyContent: "space-between"
-      }),
-      w: "100%"
+      gap: "xs",
+      direction: "column",
+      w: "100%",
+      className: props.className,
+      h: "100%",
+      sx: { overflow: "hidden" }
     },
-    /* @__PURE__ */ React19__default.createElement(ExplorerTabs, { panels, onChange: tabHandler, value: panelKey }),
-    (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React19__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto", gap: "0.5rem" }, mr: "sm", noWrap: true }, /* @__PURE__ */ React19__default.createElement(Toolbar, { table, fullscreen }), /* @__PURE__ */ React19__default.createElement(DrawerMenu_default, null))
-  ), isPreviewMode && /* @__PURE__ */ React19__default.createElement(Alert, { id: "alert-load-all-results", color: "yellow", radius: 0, sx: { flex: "0 0 auto" } }, /* @__PURE__ */ React19__default.createElement(Group, { position: "apart" }, /* @__PURE__ */ React19__default.createElement(Text, null, /* @__PURE__ */ React19__default.createElement(Text, { fw: 700, span: true }, t("previewMode.title_preview"), ":", " "), /* @__PURE__ */ React19__default.createElement(Text, { span: true }, t("previewMode.description_preview", { limit: previewLimit }))), /* @__PURE__ */ React19__default.createElement(PreviewModeSwitch, null))), /* @__PURE__ */ React19__default.createElement(Box, { id: "query-results-content", sx: { flex: "1 1", height: "calc(100% - 60px)" } }, /* @__PURE__ */ React19__default.createElement(Suspense, { fallback: props.children }, /* @__PURE__ */ React19__default.createElement(Flex, { h: "100%" }, /* @__PURE__ */ React19__default.createElement(Box, { sx: { flex: "1 1", overflowX: "scroll" } }, /* @__PURE__ */ React19__default.createElement(
-    CurrentComponent,
-    {
-      panelKey: `${panelKey}-${panelMeta}`,
-      cube,
-      params,
-      result,
-      table,
-      isError,
-      isLoading,
-      data,
-      columns,
-      pagination,
-      setPagination
-    }
-  )))))));
+    /* @__PURE__ */ React19__default.createElement(
+      Paper,
+      {
+        ref: fullscreen.ref,
+        id: "query-results-success",
+        h: "100%",
+        sx: { display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid red" }
+      },
+      /* @__PURE__ */ React19__default.createElement(
+        Flex,
+        {
+          sx: (t2) => ({
+            alignItems: "center",
+            background: t2.colorScheme === "dark" ? t2.colors.dark[7] : t2.colors.gray[1],
+            justifyContent: "space-between"
+          }),
+          w: "100%",
+          h: "fit-content"
+        },
+        /* @__PURE__ */ React19__default.createElement(ExplorerTabs, { panels, onChange: tabHandler, value: panelKey }),
+        (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React19__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto", gap: "0.5rem" }, mr: "sm", noWrap: true }, /* @__PURE__ */ React19__default.createElement(Toolbar, { table, fullscreen }), /* @__PURE__ */ React19__default.createElement(DrawerMenu_default, null))
+      ),
+      isPreviewMode && /* @__PURE__ */ React19__default.createElement(Alert, { id: "alert-load-all-results", color: "yellow", radius: 0, sx: { flex: "0 0 auto" } }, /* @__PURE__ */ React19__default.createElement(Group, { position: "apart" }, /* @__PURE__ */ React19__default.createElement(Text, null, /* @__PURE__ */ React19__default.createElement(Text, { fw: 700, span: true }, t("previewMode.title_preview"), ":", " "), /* @__PURE__ */ React19__default.createElement(Text, { span: true }, t("previewMode.description_preview", { limit: previewLimit }))), /* @__PURE__ */ React19__default.createElement(PreviewModeSwitch, null))),
+      /* @__PURE__ */ React19__default.createElement(Box, { id: "query-results-content", sx: { flex: "1 1 calc(100% - 70px)", maxHeight: "calc(100% - 70px)", border: "1px solid green" } }, /* @__PURE__ */ React19__default.createElement(Suspense, { fallback: props.children }, /* @__PURE__ */ React19__default.createElement(Flex, { h: "100%" }, /* @__PURE__ */ React19__default.createElement(Box, { sx: { flex: "1 1", overflowX: "scroll" } }, /* @__PURE__ */ React19__default.createElement(
+        CurrentComponent,
+        {
+          panelKey: `${panelKey}-${panelMeta}`,
+          cube,
+          params,
+          result,
+          table,
+          isError,
+          isLoading,
+          data,
+          columns,
+          pagination,
+          setPagination
+        }
+      )))))
+    )
+  );
 }
 
 // src/components/ParamsExplorer.tsx

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "0.3.5",
-  "main": "./dist/main.js",
-  "types": "./dist/main.d.ts",
+  "version": "0.3.7-rc.1",
+  "main": "./dist/main.mjs",
+  "types": "./dist/main.d.mts",
   "files": [
     "dist",
     "README.md"