@datawheel/data-explorer 1.1.11 → 1.1.13

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",
@@ -2945,7 +2946,9 @@ function useTable({
   const { idFormatters } = useidFormatters();
   const { sortKey, sortDir } = useSelector$1(selectSortingParams);
   const theme = useMantineTheme();
-  const isSmallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const isSmallerThanMd = useMediaQuery(
+    `(max-width: ${theme.breakpoints.md}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.xs) ? "" : "px"})`
+  );
   const columns = useMemo(() => {
     const indexColumn = {
       id: "#",
@@ -2993,7 +2996,9 @@ function useTable({
         },
         Header: ({ column: column2 }) => {
           const isSorted = isColumnSorted(entity.name, sortKey);
-          const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+          const isMobile = useMediaQuery(
+            `(max-width: ${theme.breakpoints.sm}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.xs) ? "" : "px"})`
+          );
           const actionSort = /* @__PURE__ */ React13__default.createElement(
             ActionIcon,
             {
@@ -3477,7 +3482,9 @@ var AddColumnsDrawer = () => {
   const updateUrl = useUpdateUrl();
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
-  const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const smallerThanMd = useMediaQuery(
+    `(max-width: ${theme.breakpoints.md}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.xs) ? "" : "px"})`
+  );
   return /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, /* @__PURE__ */ React13__default.createElement(
     Drawer,
     {
@@ -4018,7 +4025,9 @@ function ExplorerTabs({ panels, onChange, value }) {
   const { translate: t } = useTranslation();
   const [menuOpened, setMenuOpened] = useState(false);
   const theme = useMantineTheme();
-  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`);
+  const isMobile = useMediaQuery(
+    `(max-width: ${theme.breakpoints.xs}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.xs) ? "" : "px"})`
+  );
   const visiblePanels = isMobile ? panels.slice(0, 2) : panels;
   const menuPanels = isMobile ? panels.slice(2) : [];
   const handleMenuItemClick = (panelKey) => {
@@ -4546,7 +4555,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(
@@ -4587,7 +4605,9 @@ function SideBar(props) {
   const { expanded, input, setExpanded, setInput } = useSideBar();
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
-  const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const smallerThanMd = useMediaQuery(
+    `(max-width: ${theme.breakpoints.md}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.xs) ? "" : "px"})`
+  );
   return /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, /* @__PURE__ */ React13__default.createElement(
     Box,
     {
@@ -4611,6 +4631,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
         }
       })
     },
@@ -4620,12 +4644,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(
@@ -4671,12 +4699,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
   );
@@ -4724,22 +4756,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: {
@@ -5196,7 +5216,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.11",
+  "version": "1.1.13",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [