@datawheel/bespoke 0.5.1 → 0.5.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Accordion, Header, px, FileInput, SimpleGrid, Burger, Collapse, HoverCard, CopyButton, Breadcrumbs, Col } from '@mantine/core';
+import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Accordion, Header, px, FileInput, SimpleGrid, Burger, Collapse, CopyButton, HoverCard, Breadcrumbs, Col } from '@mantine/core';
 import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, createElement, memo, useImperativeHandle } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
@@ -22,7 +22,7 @@ import { Notifications, notifications } from '@mantine/notifications';
 import { useDispatch, useSelector } from 'react-redux';
 import Router, { useRouter } from 'next/router';
 import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconCheck, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element as Element$1, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
@@ -1369,7 +1369,7 @@ function ApiFetchException(message) {
   this.message = message;
   this.name = "ApiFetchException";
 }
-async function apiFetch(url, settings, readMemberFn, locale = "en") {
+async function apiFetch(url, readMemberFn, locale = "en", block) {
   const start2 = Date.now();
   let finalUrl = url;
   let finalData;
@@ -1379,6 +1379,7 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
     const slugRegex = new RegExp(`[?&]bespoke_slugs=${parsedQuery.get("bespoke_slugs")}`, "g");
     finalUrl = finalUrl.replace(slugRegex, "");
   }
+  const settings = block ? block.settings : {};
   const useProxy = settings && settings.useProxy && settings.useProxy === "true" ? true : false;
   if (typeof window === "object" && useProxy) {
     const result = await urlProxy({ url: finalUrl, timeout: apiFetchTimeout });
@@ -1437,7 +1438,12 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
             }
             return data && Array.isArray(data) ? data : [];
           }).catch((err) => {
-            console.log("Error hydrating slugs", err);
+            console.error(`Error hydrating slugs for Variant: ${variantId}, Key: ${keyId}, Accessor: ${accessor}`);
+            console.error(`  Url ${url}`);
+            if (block) {
+              console.error(`  From Section ${block.section_id} and Block ${block.id}`);
+            }
+            console.error(err);
             return [];
           });
           if (bespokeMembers) {
@@ -1490,9 +1496,9 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       apiPromisesList.push(
         apiFetch(
           apiUrl,
-          block.settings,
           readMemberFn,
-          locale
+          locale,
+          block
         ).catch(
           (e) => {
             throw new BlockException(` Excecution of ${block.type}-${block.id} in section ${block.section_id} in report ${variables.report_name} (${variables.report_id}) failed.
@@ -1892,6 +1898,7 @@ function previewsToAttributes(previews = []) {
       const i2 = index + 1;
       attributes[`id${i2}`] = preview.id;
       attributes[`name${i2}`] = preview.name;
+      attributes[`slug${i2}`] = preview.slug;
       if ("attributes" in preview) {
         Object.keys(preview.attributes).forEach((key) => {
           attributes[`attr_${key}${i2}`] = preview.attributes[key];
@@ -1899,6 +1906,7 @@ function previewsToAttributes(previews = []) {
       }
       attributes[`variant_id${i2}`] = preview.variant_id;
       attributes[`variant_name${i2}`] = preview.variant_name;
+      attributes[`variant_slug${i2}`] = preview.variant_slug;
       attributes[`dimension_id${i2}`] = preview.dimension_id;
       attributes[`dimension_name${i2}`] = preview.dimension_name;
       attributes["report_id"] = preview.report_id;
@@ -4624,10 +4632,11 @@ function RichText({
   size = "md",
   html,
   style = {},
-  append = /* @__PURE__ */ jsx(Fragment, {})
+  append = /* @__PURE__ */ jsx(Fragment, {}),
+  isPreview = false
 }) {
   const parentProps = getParentNodeProps(html);
-  const paragraphHTML = replaceTags(html);
+  const paragraphHTML = replaceTags(html, isPreview);
   const textAlign = style && style.align ? String(style.align) : "left";
   let Wrapper = Text;
   let extraProps = {};
@@ -4670,7 +4679,7 @@ var init_RichText = __esm({
       parse2(htmlString, options);
       return parentProps;
     };
-    replaceTags = (stringHTML = "-Empty text-") => {
+    replaceTags = (stringHTML = "", isPreview = false) => {
       const options = {
         replace: (domNode) => {
           const { type } = domNode;
@@ -4680,16 +4689,26 @@ var init_RichText = __esm({
               return /* @__PURE__ */ jsx(Fragment, { children: domToReact(children, options) });
             }
             if (name === "a") {
-              const { href } = attribs;
+              const { href, target } = attribs;
               const isExternal = href.indexOf("http") === 0 ? true : false;
-              return /* @__PURE__ */ jsx(
+              const isBlank = target && target === "_blank" ? true : false;
+              const anchorElement = /* @__PURE__ */ jsx(
+                Anchor,
+                {
+                  ...attribs,
+                  href: attribs.href,
+                  target: "_blank",
+                  children: domToReact(children, options)
+                }
+              );
+              return isExternal || isBlank || isPreview ? anchorElement : /* @__PURE__ */ jsx(
                 Link,
                 {
                   ...attribs,
                   href: attribs.href,
-                  target: isExternal ? "_blank" : void 0,
                   prefetch: false,
-                  children: domToReact(children, options)
+                  passHref: true,
+                  children: anchorElement
                 }
               );
             } else if (name === "strong") {
@@ -4716,7 +4735,7 @@ var init_RichText = __esm({
 function InnerTooltip(props) {
   const { content, style = {} } = props;
   const print = usePrint();
-  const contentObj = /* @__PURE__ */ jsx(RichText, { component: "span", html: content });
+  const contentObj = /* @__PURE__ */ jsx(RichText, { component: "span", html: content, isPreview: true });
   const element = useMemo(() => {
     return print ? /* @__PURE__ */ jsx("div", { className: "bespoke-inner-tooltip-notification", children: /* @__PURE__ */ jsx(
       Notification,
@@ -5449,7 +5468,7 @@ function Selector(config) {
         setMultiValue(parseMultiValue(value2, defaultValue));
       }
     }
-  }, [window.location.search]);
+  }, [window.location.search, defaultValue]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "none" }, children: /* @__PURE__ */ jsx(Box, { children: {
       [SELECTOR_TYPES.SINGLE]: component === SELECTOR_COMPONENTS.SEGMENTED_CONTROL ? /* @__PURE__ */ jsxs("div", { children: [
@@ -12511,14 +12530,17 @@ function TranslationHeader({ locale, content }) {
         children: locale.toUpperCase()
       }
     ),
-    /* @__PURE__ */ jsx(CopyButton, { value: content, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { size: "xs", color: copied ? "teal" : "gray", variant: "subtle", onClick: () => {
-      copy();
-      const blobInput = new Blob([content], { type: "text/html" });
-      const clipboardItemInput = new ClipboardItem({ "text/html": blobInput });
-      navigator.clipboard.write([clipboardItemInput]);
-    }, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) })
+    /* @__PURE__ */ jsx(CopyBtn, { content })
   ] });
 }
+function CopyBtn({ content }) {
+  return /* @__PURE__ */ jsx(CopyButton, { value: content, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { size: "xs", color: copied ? "teal" : "gray", variant: "subtle", onClick: () => {
+    copy();
+    const blobInput = new Blob([content], { type: "text/html" });
+    const clipboardItemInput = new ClipboardItem({ "text/html": blobInput });
+    navigator.clipboard.write([clipboardItemInput]);
+  }, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
+}
 function ReferenceTranslation({ referenceLocale, referenceContent }) {
   return /* @__PURE__ */ jsx(Stack, { spacing: "xs", children: /* @__PURE__ */ jsx(
     BespokeTextEditor,
@@ -12563,6 +12585,7 @@ function FieldWithTranslation({
             children: titleCase(field)
           }
         ),
+        toolbarRightSection: /* @__PURE__ */ jsx(CopyBtn, { content: value }),
         toolbarOptions: {
           history: true,
           alignment: field !== "tooltip",
@@ -13536,6 +13559,7 @@ function TableUI(props) {
       Object.keys(item).forEach((key) => columns.add(key));
     });
     const stateColumns = {};
+    const variableColumns = [];
     if (simpleState.columns && Object.keys(simpleState.columns)) {
       simpleState.columns.forEach((column) => {
         stateColumns[column.accessorKey] = column.header;
@@ -13553,11 +13577,14 @@ function TableUI(props) {
         key: randomId(),
         label: key
       });
+      variableColumns.push(key);
     });
     customLabelsHandler.setState(keyLabels);
     selectedColumnsHandler.setState(keyList);
     const { initialState: initialState4 = {}, state = {}, mantinePaginationProps = {}, ...props2 } = simpleState.tableProps || {};
-    setColumnOrder(state.columnOrder || []);
+    const currentColumnOrder = state.columnOrder.filter((col) => variableColumns.includes(col));
+    currentColumnOrder.push(variableColumns.filter((col) => !state.columnOrder.includes(col)));
+    setColumnOrder(currentColumnOrder.flat() || []);
     setPaginationProps(mantinePaginationProps);
     setPaginationState(initialState4.pagination);
     setTableProps({ ...props2 });
@@ -14054,7 +14081,8 @@ function ParagraphPreview({ paragraph, tooltip, settings }) {
       component: "p",
       html: paragraphHTML,
       style: settings,
-      append: tooltipObj
+      append: tooltipObj,
+      isPreview: true
     }
   );
 }
@@ -14096,9 +14124,9 @@ function StatPreview({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "bespoke-Stat-wrapper", children: [
-      /* @__PURE__ */ jsx(RichText, { component: "div", size: "md", html: titleHTML, style: settings }),
-      /* @__PURE__ */ jsx(RichText, { component: "div", size: "xl", html: valueHTML, style: settings }),
-      /* @__PURE__ */ jsx(RichText, { component: "div", size: "sm", html: subtitleHTML, style: settings })
+      /* @__PURE__ */ jsx(RichText, { component: "div", size: "md", html: titleHTML, style: settings, isPreview: true }),
+      /* @__PURE__ */ jsx(RichText, { component: "div", size: "xl", html: valueHTML, style: settings, isPreview: true }),
+      /* @__PURE__ */ jsx(RichText, { component: "div", size: "sm", html: subtitleHTML, style: settings, isPreview: true })
     ] }, "stat"),
     tooltip && /* @__PURE__ */ jsx(InnerTooltip, { content: tooltip })
   ] }) });
@@ -14116,7 +14144,7 @@ function SubtitlePreview({ subtitle, tooltip, settings }) {
   const subtitleHTML = sanitizeBlockContent_default(subtitle) || "<span class='cr-block-placeholder'>Small subtitle.</span>";
   const align = settings && settings.align ? settings.align : "left";
   return /* @__PURE__ */ jsxs(Group, { spacing: "sm", position: getAlignForGroup(align), children: [
-    /* @__PURE__ */ jsx(RichText, { size: "sm", html: subtitleHTML }),
+    /* @__PURE__ */ jsx(RichText, { size: "sm", html: subtitleHTML, isPreview: true }),
     tooltip && /* @__PURE__ */ jsx(InnerTooltip, { content: tooltip, style: { display: "inline-flex" } })
   ] });
 }
@@ -14165,7 +14193,8 @@ function TitlePreview({
         component: "h",
         order: order2,
         style: settings,
-        html: titleHTML
+        html: titleHTML,
+        isPreview: true
       }
     ),
     searchOnClick && /* @__PURE__ */ jsx(Tooltip, { label: `Click will open '${searchType}' report search`, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", children: /* @__PURE__ */ jsx(IconSearch, { size: 20 }) }) }),
@@ -14216,7 +14245,7 @@ function SelectorPreview(config) {
     dispatch(setQueryParam(resource, selectorIdentifier, e.join()));
   };
   const { name, settings } = config;
-  const label = config.hideLabel === "true" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(RichText, { component: "div", html: name, size: "sm", style: settings });
+  const label = config.hideLabel === "true" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(RichText, { component: "div", html: name, size: "sm", style: settings, isPreview: true });
   return {
     [SELECTOR_TYPES.SINGLE]: config.component === SELECTOR_COMPONENTS.SEGMENTED_CONTROL ? /* @__PURE__ */ jsxs("div", { children: [
       label,
@@ -14524,9 +14553,9 @@ function ImagePreview(props) {
   const align = settings && settings.align ? String(settings.align) : "left";
   if (descText && descText.length || title && title.length) {
     element = /* @__PURE__ */ jsxs(Stack, { className: "bespoke-Image-wrapper", align: getAlignForStack(align), spacing: "sm", children: [
-      title && /* @__PURE__ */ jsx(RichText, { component: "p", html: title, style: settings }),
+      title && /* @__PURE__ */ jsx(RichText, { component: "p", html: title, style: settings, isPreview: true }),
       element,
-      desc && /* @__PURE__ */ jsx(RichText, { component: "p", size: "sm", html: desc, style: settings })
+      desc && /* @__PURE__ */ jsx(RichText, { component: "p", size: "sm", html: desc, style: settings, isPreview: true })
     ] });
   }
   return srcText && altText ? element : /* @__PURE__ */ jsx(Center, { mih: 100, bg: "white", children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: "IMAGE" }, "type") });
@@ -14753,7 +14782,7 @@ function TablePreview({ columns = [], id, data = [], tableProps = {} }) {
   ), [columnsKeys, data]);
   const richColumns = useMemo(() => columns.map((column) => ({
     ...column,
-    Cell: ({ renderedCellValue }) => /* @__PURE__ */ jsx(RichText, { html: `${renderedCellValue}` }),
+    Cell: ({ renderedCellValue }) => /* @__PURE__ */ jsx(RichText, { html: `${renderedCellValue}`, isPreview: true }),
     filterFn: "contains"
   })), [columns]);
   const locale = useCurrentLocale();
@@ -15245,7 +15274,7 @@ var init_Block = __esm({
 });
 
 // libs/settings/section.tsx
-var sectionSettings, defaultSettings2, defaultSectionSettings;
+var sectionSettings, defaultSettings2, defaultSectionSettings, getOptionsSettings;
 var init_section2 = __esm({
   "libs/settings/section.tsx"() {
     init_esm_shims();
@@ -15302,8 +15331,16 @@ var init_section2 = __esm({
     defaultSectionSettings = {
       memberImageBg: false,
       optionsMenu: false,
+      optionData: true,
+      optionImage: true,
+      optionShare: true,
       ...defaultSettings2
     };
+    getOptionsSettings = (settings) => ({
+      data: typeof settings.optionData === "boolean" ? settings.optionData : true,
+      image: typeof settings.optionImage === "boolean" ? settings.optionImage : true,
+      share: typeof settings.optionShare === "boolean" ? settings.optionShare : true
+    });
   }
 });
 function SectionBackground({ previews }) {
@@ -15625,7 +15662,7 @@ function DataTab(props) {
         setLoadingPreview(true);
         const dataItem = selectedSource.data[selectedDataset];
         if (typeof dataItem === "string") {
-          apiFetch(dataItem, {}, readMemberFn, locale).then((response) => {
+          apiFetch(dataItem, readMemberFn, locale).then((response) => {
             const dataToShare = guessResponse(response);
             setPreviewsSource({
               ...previewsSource,
@@ -16272,7 +16309,9 @@ function OptionsModal(props) {
     open,
     title
   } = props;
-  const [selectedTab, setSelectedTab] = useState(initialMode || "data");
+  const settings = getOptionsSettings(section.settings);
+  const availableTabs = useMemo(() => tabList.filter((tId) => settings[tId]), [settings]);
+  const [selectedTab, setSelectedTab] = useState(initialMode || availableTabs[0] || "data");
   const optionsTranslations = useBespokeTranslations("options");
   useEffect(() => {
     if (initialMode !== selectedTab) {
@@ -16280,6 +16319,18 @@ function OptionsModal(props) {
     }
   }, [initialMode]);
   const translations = { ...DEFAULT_TRANSLATIONS5, ...optionsTranslations };
+  const tabs = useMemo(() => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { children: [
+        settings.data && /* @__PURE__ */ jsx(Tabs.Tab, { value: "data", children: translations.download_title }),
+        settings.image && /* @__PURE__ */ jsx(Tabs.Tab, { value: "image", children: translations.image_title }),
+        settings.share && /* @__PURE__ */ jsx(Tabs.Tab, { value: "share", children: translations.share_title })
+      ] }),
+      settings.data && /* @__PURE__ */ jsx(Tabs.Panel, { value: "data", children: /* @__PURE__ */ jsx(DataTab, { section }) }),
+      settings.image && /* @__PURE__ */ jsx(Tabs.Panel, { value: "image", children: /* @__PURE__ */ jsx(ImageTab, { section }) }),
+      settings.share && /* @__PURE__ */ jsx(Tabs.Panel, { value: "share", children: /* @__PURE__ */ jsx(ShareTab, { section }) })
+    ] });
+  }, [settings, section, translations]);
   return /* @__PURE__ */ jsx("div", { className: "cms-section-options-modal", children: open && /* @__PURE__ */ jsx(
     Modal,
     {
@@ -16288,28 +16339,19 @@ function OptionsModal(props) {
       onClose: () => onEnds(),
       size: "xl",
       title,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Tabs,
         {
           onTabChange: setSelectedTab,
           value: selectedTab,
           keepMounted: false,
-          children: [
-            /* @__PURE__ */ jsxs(Tabs.List, { children: [
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "data", children: translations.download_title }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "image", children: translations.image_title }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "share", children: translations.share_title })
-            ] }),
-            /* @__PURE__ */ jsx(Tabs.Panel, { value: "data", children: /* @__PURE__ */ jsx(DataTab, { section }) }),
-            /* @__PURE__ */ jsx(Tabs.Panel, { value: "image", children: /* @__PURE__ */ jsx(ImageTab, { section }) }),
-            /* @__PURE__ */ jsx(Tabs.Panel, { value: "share", children: /* @__PURE__ */ jsx(ShareTab, { section }) })
-          ]
+          children: tabs
         }
       )
     }
   ) });
 }
-var DEFAULT_TRANSLATIONS5;
+var DEFAULT_TRANSLATIONS5, tabList;
 var init_OptionsModal = __esm({
   "components/options/OptionsModal.tsx"() {
     init_esm_shims();
@@ -16317,11 +16359,13 @@ var init_OptionsModal = __esm({
     init_ImageTab();
     init_ShareTab();
     init_TranslationsProvider();
+    init_section2();
     DEFAULT_TRANSLATIONS5 = {
       download_title: "Download Data",
       image_title: "Save Image",
       share_title: "Share Link"
     };
+    tabList = ["data", "image", "share"];
   }
 });
 function Options(props) {
@@ -16331,6 +16375,7 @@ function Options(props) {
   const sectionRef = useSectionRef(sectionId);
   const optionsTranslations = useBespokeTranslations("options");
   const translations = { ...DEFAULT_TRANSLATIONS5, ...optionsTranslations };
+  const settings = getOptionsSettings(sectionRef.isSuccess ? sectionRef.data.settings : {});
   const onClickOption = (mode2) => {
     setMode(mode2);
     setOpened(true);
@@ -16340,7 +16385,7 @@ function Options(props) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "cms-section-options", children: [
     /* @__PURE__ */ jsxs(Button.Group, { children: [
-      /* @__PURE__ */ jsx(
+      settings.data && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "default",
@@ -16352,7 +16397,7 @@ function Options(props) {
           children: /* @__PURE__ */ jsx(IconTable, { size: 16 })
         }
       ),
-      /* @__PURE__ */ jsx(
+      settings.image && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "default",
@@ -16364,7 +16409,7 @@ function Options(props) {
           children: /* @__PURE__ */ jsx(IconCamera, { size: 16 })
         }
       ),
-      /* @__PURE__ */ jsx(
+      settings.share && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "default",
@@ -16394,6 +16439,7 @@ var init_Options = __esm({
     init_OptionsModal();
     init_store2();
     init_TranslationsProvider();
+    init_section2();
   }
 });
 
@@ -21382,7 +21428,6 @@ function BlockElement({
                 !allowed && /* @__PURE__ */ jsx(Tooltip, { withArrow: true, label: allowedMessage, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "transparent", children: /* @__PURE__ */ jsx(IconEyeOff, { size: 20 }) }) }, "allowed"),
                 block.type !== "generator" && /* @__PURE__ */ jsx(StyleMenu_default, { id, display: "button" }, "design"),
                 /* @__PURE__ */ jsx(ActionIcon, { onClick: () => setOpened(true), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
-                /* @__PURE__ */ jsx(DeleteButton_default, { type: ENTITY_TYPES.BLOCK, id }, "cog"),
                 /* @__PURE__ */ jsx(
                   ActionIcon,
                   {
@@ -21390,7 +21435,8 @@ function BlockElement({
                     children: /* @__PURE__ */ jsx(IconCopy, { size: 20 })
                   },
                   "copy"
-                )
+                ),
+                /* @__PURE__ */ jsx(DeleteButton_default, { type: ENTITY_TYPES.BLOCK, id }, "cog")
               ]
             },
             "bc"
@@ -21433,8 +21479,8 @@ function SectionHeader({
   id,
   dragHandleProps,
   hidden,
-  optionsMenu,
-  onActivate
+  onActivate,
+  sectionSettings: sectionSettings2
 }) {
   const section = useAppSelector((state) => state.records.entities.section[id] || null);
   if (!section)
@@ -21467,7 +21513,7 @@ function SectionHeader({
           )
         ] }) }),
         /* @__PURE__ */ jsxs(Group, { children: [
-          optionsMenu && /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", mx: 16, align: "center", gap: "xs", children: [
+          sectionSettings2.optionsMenu && /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", mx: 16, align: "center", gap: "xs", children: [
             /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
             /* @__PURE__ */ jsx(Options, { sectionId: section.id, disabled: !active })
           ] }),
@@ -21643,7 +21689,7 @@ function SectionEditor({
   const blocks = useAppSelector((state) => state.records.entities.block);
   const previews = useAppSelector((state) => state.status.previews);
   const cloneState = useCloneStatusSelector("section", section.id);
-  const { memberImageBg, optionsMenu, hidden, columnSettings = {} } = section.settings;
+  const { memberImageBg, hidden, columnSettings = {} } = section.settings;
   const isActive = activeEntity.type === "section" && activeEntity.id === section.id;
   const { inputs, consumers } = useMemo(() => {
     if (hoverBlock) {
@@ -21735,7 +21781,7 @@ function SectionEditor({
           setShowGenerators,
           hasGenerators: Boolean(generators.length)
         },
-        optionsMenu
+        sectionSettings: section.settings
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -22511,35 +22557,54 @@ function SectionSettingsPanel() {
   const report = useAppSelector((state) => activeSection && state.records.entities.report[section.report_id]);
   const reportSettings = report?.settings;
   const { settings, updateSettings } = useSectionSettings(activeSection);
+  const optionsMenu = useMemo(() => [
+    { key: "optionData", label: "Download data (csv, xls, json)" },
+    { key: "optionImage", label: "Save Image" },
+    { key: "optionShare", label: "Share link" }
+  ], []);
+  const optionsList = useMemo(() => optionsMenu.map((om) => /* @__PURE__ */ jsxs(List.Item, { children: [
+    om.label,
+    "."
+  ] }, `item-${om.key}`)), [optionsMenu]);
   if (activeEntity.type !== "section" || !activeEntity.id)
     return null;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(NameInput, { activeSection }),
     /* @__PURE__ */ jsx(Divider, { my: "sm" }),
     /* @__PURE__ */ jsxs(Stack, { mt: "sm", children: [
-      /* @__PURE__ */ jsx(
-        BespokeInfoTooltip,
-        {
-          target: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Stack, { spacing: "0.4rem", children: [
+        /* @__PURE__ */ jsx(
+          BespokeInfoTooltip,
+          {
+            target: /* @__PURE__ */ jsx(
+              Switch,
+              {
+                radius: "sm",
+                label: "Show export menu.",
+                checked: settings.optionsMenu,
+                onChange: (e) => updateSettings("optionsMenu", e.currentTarget.checked)
+              }
+            ),
+            dropdown: /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Export Menu" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: "The Export Menu will allow users to:" }),
+              /* @__PURE__ */ jsx(List, { withPadding: true, size: "sm", children: optionsList })
+            ] })
+          }
+        ),
+        settings.optionsMenu && /* @__PURE__ */ jsx(Stack, { spacing: "0.5rem", pl: "md", children: optionsMenu.map(
+          (optionMenu) => /* @__PURE__ */ jsx(
             Switch,
             {
               radius: "sm",
-              label: "Show export menu.",
-              checked: settings.optionsMenu,
-              onChange: (e) => updateSettings("optionsMenu", e.currentTarget.checked)
-            }
-          ),
-          dropdown: /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Export Menu" }),
-            /* @__PURE__ */ jsx(Text, { size: "sm", children: "The Export Menu will allow users to:" }),
-            /* @__PURE__ */ jsxs(List, { withPadding: true, size: "sm", children: [
-              /* @__PURE__ */ jsx(List.Item, { children: "Download data (csv, xls, json)." }),
-              /* @__PURE__ */ jsx(List.Item, { children: "Save Image" }),
-              /* @__PURE__ */ jsx(List.Item, { children: "Share Link" })
-            ] })
-          ] })
-        }
-      ),
+              label: optionMenu.label,
+              checked: typeof settings[optionMenu.key] === "undefined" ? settings.optionsMenu : settings[optionMenu.key],
+              onChange: (e) => updateSettings(optionMenu.key, e.currentTarget.checked)
+            },
+            optionMenu.key
+          )
+        ) })
+      ] }),
       /* @__PURE__ */ jsx(
         BespokeInfoTooltip,
         {

package/dist/server.js

@@ -4957,7 +4957,7 @@ function ApiFetchException(message) {
   this.name = "ApiFetchException";
 }
 var apiFetchTimeout = process.env.NEXT_PUBLIC_REPORTS_API_FETCH_TIMEOUT || 0;
-async function apiFetch(url, settings, readMemberFn, locale = "en") {
+async function apiFetch(url, readMemberFn, locale = "en", block) {
   const start = Date.now();
   let finalUrl = url;
   let finalData;
@@ -4967,6 +4967,7 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
     const slugRegex = new RegExp(`[?&]bespoke_slugs=${parsedQuery.get("bespoke_slugs")}`, "g");
     finalUrl = finalUrl.replace(slugRegex, "");
   }
+  const settings = block ? block.settings : {};
   const useProxy = settings && settings.useProxy && settings.useProxy === "true" ? true : false;
   if (typeof window === "object" && useProxy) {
     const result = await urlProxy({ url: finalUrl, timeout: apiFetchTimeout });
@@ -5025,7 +5026,12 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
             }
             return data && Array.isArray(data) ? data : [];
           }).catch((err) => {
-            console.log("Error hydrating slugs", err);
+            console.error(`Error hydrating slugs for Variant: ${variantId}, Key: ${keyId}, Accessor: ${accessor}`);
+            console.error(`  Url ${url}`);
+            if (block) {
+              console.error(`  From Section ${block.section_id} and Block ${block.id}`);
+            }
+            console.error(err);
             return [];
           });
           if (bespokeMembers) {
@@ -5078,9 +5084,9 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       apiPromisesList.push(
         apiFetch(
           apiUrl,
-          block.settings,
           readMemberFn,
-          locale
+          locale,
+          block
         ).catch(
           (e) => {
             throw new BlockException(` Excecution of ${block.type}-${block.id} in section ${block.section_id} in report ${variables.report_name} (${variables.report_id}) failed.
@@ -5422,6 +5428,7 @@ function previewsToAttributes(previews = []) {
       const i2 = index + 1;
       attributes[`id${i2}`] = preview.id;
       attributes[`name${i2}`] = preview.name;
+      attributes[`slug${i2}`] = preview.slug;
       if ("attributes" in preview) {
         Object.keys(preview.attributes).forEach((key) => {
           attributes[`attr_${key}${i2}`] = preview.attributes[key];
@@ -5429,6 +5436,7 @@ function previewsToAttributes(previews = []) {
       }
       attributes[`variant_id${i2}`] = preview.variant_id;
       attributes[`variant_name${i2}`] = preview.variant_name;
+      attributes[`variant_slug${i2}`] = preview.variant_slug;
       attributes[`dimension_id${i2}`] = preview.dimension_id;
       attributes[`dimension_name${i2}`] = preview.dimension_name;
       attributes["report_id"] = preview.report_id;
@@ -7078,6 +7086,9 @@ function BespokeManagerServerSideProps(options) {
             ]);
           }
         }
+        if (page === "metadata") {
+          await dispatch(readEntity("report", { include: "dimensions" }));
+        }
         if (page === "formatters") {
           await dispatch(readEntity("formatter", {}));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -139,6 +139,6 @@
     "tsup": "^6.6.0"
   },
   "peerDependencies": {
-    "next": "^13.4.0"
+    "next": "^14.2.3"
   }
-}
+}