@datawheel/data-explorer 1.1.12 → 1.1.14

package/dist/main.mjs

@@ -1,5 +1,5 @@
-import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Skeleton, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, packSx, Divider, Drawer, Checkbox, Popover } from '@mantine/core';
-import { useClipboard, useDebouncedState, useFullscreen, useMediaQuery, useDisclosure } from '@mantine/hooks';
+import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Skeleton, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Divider, Drawer, Checkbox, packSx, Popover } from '@mantine/core';
+import { useClipboard, useDebouncedState, useMediaQuery, useFullscreen, useDisclosure } from '@mantine/hooks';
 import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconX, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React13 from 'react';
 import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, Component, useLayoutEffect } from 'react';
@@ -2356,6 +2356,7 @@ function TableFooter(props) {
     Box,
     {
       w: "100%",
+      id: "dex-table-footer-container",
       sx: (t2) => ({
         flex: "0 0 70px",
         maxWidth: "100vw",
@@ -3051,8 +3052,18 @@ function useTable({
               align: { base: "flex-start", sm: "center" },
               direction: { base: "column", sm: "row" }
             },
-            /* @__PURE__ */ React13__default.createElement(Box, { sx: { flexGrow: 1 }, w: { base: "100%", sm: "auto" } }, /* @__PURE__ */ React13__default.createElement(Flex, { gap: { base: 0, sm: "xs" }, align: "center" }, getActionIcon(entityType), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, header), !isMobile && actionSort)),
-            /* @__PURE__ */ React13__default.createElement(Group, { position: "apart", w: "100%" }, isMobile && actionSort, showTrashIcon(finalKeys, entityType) && /* @__PURE__ */ React13__default.createElement(
+            /* @__PURE__ */ React13__default.createElement(Box, { sx: { flexGrow: 1 }, w: { base: "100%", sm: "auto" } }, /* @__PURE__ */ React13__default.createElement(
+              Flex,
+              {
+                gap: { base: 0, sm: "xs" },
+                align: "center",
+                justify: { base: "flex-start", sm: "space-between" }
+              },
+              getActionIcon(entityType),
+              /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, header),
+              !isMobile && /* @__PURE__ */ React13__default.createElement(Box, { ml: "auto" }, actionSort)
+            )),
+            /* @__PURE__ */ React13__default.createElement(Group, { position: "apart", w: { base: "100%", sm: "auto" } }, isMobile && actionSort, showTrashIcon(finalKeys, entityType) && /* @__PURE__ */ React13__default.createElement(
               CustomActionIcon_default,
               {
                 label: `At least one ${getEntityText(entityType)} is required.`,
@@ -3432,7 +3443,7 @@ var MultiFilter = ({ header }) => {
   );
   const query = useSelector$1(selectCurrentQueryItem);
   if (!drilldown || !cut) return null;
-  return /* @__PURE__ */ React13__default.createElement(Box, { pt: "md", style: { fontWeight: "normal" } }, /* @__PURE__ */ React13__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(Box, { pt: "sm", style: { fontWeight: "normal" } }, /* @__PURE__ */ React13__default.createElement(
     MultiSelect,
     {
       sx: { flex: "1 1 100%" },
@@ -4554,7 +4565,16 @@ function useCubeSearch(graph, input, locale) {
 var [useSideBar, Provider] = createContext4("SideBar");
 function SideBarProvider(props) {
   const [input, setInput] = useDebouncedState("", 150, { leading: true });
-  const [expanded, setExpanded] = useState(true);
+  const theme = useMantineTheme();
+  const isSmallScreen = useMediaQuery(
+    `(max-width: ${theme.breakpoints.md}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.md) ? "" : "px"})`,
+    true
+    // Default to 'true' when undefined (assuming small screen to be safe)
+  );
+  const [expanded, setExpanded] = useState(false);
+  useEffect(() => {
+    setExpanded(!isSmallScreen);
+  }, [isSmallScreen]);
   const graph = useBuildGraph(props.locale);
   const { results, map } = useCubeSearch(graph, input, props.locale);
   return /* @__PURE__ */ React13__default.createElement(
@@ -4621,6 +4641,10 @@ function SideBar(props) {
           paddingTop: expanded ? t2.spacing.md : 0,
           paddingBottom: expanded ? t2.spacing.md : 0,
           borderRadius: expanded ? 0 : "100%"
+        },
+        [t2.fn.smallerThan("sm")]: {
+          width: expanded ? "100vw" : 0,
+          maxWidth: expanded ? "100vw" : 0
         }
       })
     },
@@ -4630,12 +4654,16 @@ function SideBar(props) {
         position: "apart",
         align: "center",
         noWrap: true,
-        sx: {
+        sx: (t2) => ({
           overflow: "hidden",
           whiteSpace: "nowrap",
           transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-          width: expanded ? 300 : 0
-        }
+          width: expanded ? 300 : 0,
+          [t2.fn.smallerThan("sm")]: {
+            width: expanded ? "100vw" : 0,
+            maxWidth: expanded ? "100vw" : 0
+          }
+        })
       },
       /* @__PURE__ */ React13__default.createElement(Text, { sx: (t2) => ({ color: t2.colorScheme === "dark" ? t2.white : t2.black }), ml: "sm" }, t("params.label_dataset")),
       /* @__PURE__ */ React13__default.createElement(
@@ -4681,12 +4709,16 @@ function SideBarItem(props) {
   return /* @__PURE__ */ React13__default.createElement(
     Box,
     {
-      sx: {
+      sx: (t) => ({
         overflow: "hidden",
         whiteSpace: "nowrap",
         width: expanded ? 300 : 0,
-        transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
-      }
+        transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+        [t.fn.smallerThan("sm")]: {
+          width: expanded ? "100vw" : 0,
+          maxWidth: expanded ? "100vw" : 0
+        }
+      })
     },
     props.children
   );
@@ -4734,22 +4766,10 @@ function CubeSearchInput(props) {
 }
 
 // src/components/ExplorerResults.tsx
-function SideBarControlBtn2({ actionIconProps = {} }) {
+function SideBarControlBtn2() {
   const { expanded, setExpanded } = useSideBar();
-  const sx = (t) => ({
-    alignSelf: "center",
-    color: t.colorScheme === "dark" ? t.white : t.colors.gray[7]
-  });
-  return /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", display: { base: "flex", md: "none" }, align: "center" }, /* @__PURE__ */ React13__default.createElement(
-    ActionIcon,
-    {
-      onClick: () => setExpanded(!expanded),
-      variant: "subtle",
-      ...actionIconProps,
-      sx: [sx, ...packSx(actionIconProps.sx)]
-    },
-    /* @__PURE__ */ React13__default.createElement(DataSetSVG, null)
-  ), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, "Select Dataset"));
+  const { translate: t } = useTranslation();
+  return /* @__PURE__ */ React13__default.createElement(UnstyledButton, { display: { base: "block", md: "none" }, onClick: () => setExpanded(!expanded) }, /* @__PURE__ */ React13__default.createElement(Group, { align: "center", spacing: "xs", noWrap: true }, /* @__PURE__ */ React13__default.createElement(ThemeIcon, { variant: "subtle" }, /* @__PURE__ */ React13__default.createElement(DataSetSVG, null)), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, t("params.label_dataset"))));
 }
 var useStyles2 = createStyles(() => ({
   container: {
@@ -5206,7 +5226,7 @@ function SubtopicAccordion({
       onChange: setValue,
       key: `subtopic-${parent}`,
       chevronPosition: "left",
-      w: 300,
+      w: { base: "100vw", sm: 300 },
       ml: 0,
       styles: (t) => ({
         control: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [