@datawheel/bespoke 0.1.32 → 0.1.33

package/dist/index.js

@@ -16,7 +16,7 @@ import { Notifications, notifications } from '@mantine/notifications';
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, useRef, Fragment as Fragment$1, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, Title, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Paper, Grid, Input, Popover, Checkbox, Radio, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, Image, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Title, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Paper, Grid, Input, Popover, Checkbox, Radio, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, Image, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
@@ -2929,38 +2929,51 @@ function Viz(config) {
   const Visualization = vizTypes[fallbackType];
   const { _data, ...vizPropsConfig } = vizProps.config;
   const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flex: "1 1 100%",
-        minHeight: 400
-      },
-      children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
-        Visualization,
-        {
-          style: { flex: 1 },
-          dataFormat: (resp) => {
-            vizProps.data && Array.isArray(vizProps.data) && vizProps.data.length > 1 && vizProps.data.some((d) => typeof d === "string");
-            let data;
-            try {
-              data = vizProps.dataFormat(resp);
-            } catch (e) {
-              console.log("Error in dataFormat: ", e);
-              data = [];
-            }
-            return data;
-          },
-          linksFormat: vizProps.linksFormat,
-          nodesFormat: vizProps.nodesFormat,
-          topojsonFormat: vizProps.topojsonFormat,
-          config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr }
+  const { title } = vizConfig;
+  return /* @__PURE__ */ jsxs("div", { className: "bespoke-Viz", children: [
+    title && /* @__PURE__ */ jsx(
+      Title,
+      {
+        className: "bespoke-Viz-title",
+        order: 4,
+        size: "h6",
+        align: "center",
+        dangerouslySetInnerHTML: { __html: title }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flex: "1 1 100%",
+          minHeight: 400
         },
-        "viz-key"
-      ) })
-    }
-  );
+        children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
+          Visualization,
+          {
+            style: { flex: 1 },
+            dataFormat: (resp) => {
+              vizProps.data && Array.isArray(vizProps.data) && vizProps.data.length > 1 && vizProps.data.some((d) => typeof d === "string");
+              let data;
+              try {
+                data = vizProps.dataFormat(resp);
+              } catch (e) {
+                console.log("Error in dataFormat: ", e);
+                data = [];
+              }
+              return data;
+            },
+            linksFormat: vizProps.linksFormat,
+            nodesFormat: vizProps.nodesFormat,
+            topojsonFormat: vizProps.topojsonFormat,
+            config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr, title: void 0 }
+          },
+          "viz-key"
+        ) })
+      }
+    )
+  ] });
 }
 var vizTypes;
 var init_Viz = __esm({
@@ -5606,35 +5619,50 @@ function SectionBackground() {
     key: member ? `bg-${member.content_id}` : `bg-${ix}`,
     src: member ? `/api/cms/member/image.png?member=${member.content_id}&size=splash` : ""
   }));
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      className: "cms-section-bg",
-      grow: true,
-      spacing: 0,
-      style: {
-        background: "white",
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        opacity: 0.5
-      },
-      children: images.map((image) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "cms-section-member-bg",
-          style: {
-            backgroundImage: `url(${image.src})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            height: "100%",
-            width: "100%"
-          }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "cms-section-gradient-bg",
+        style: {
+          background: "white",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          opacity: 0.33,
+          zIndex: 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: "cms-section-bg",
+        grow: true,
+        spacing: 0,
+        style: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          zIndex: 0
         },
-        image.key
-      ))
-    }
-  );
+        children: images.map((image) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "cms-section-member-bg",
+            style: {
+              backgroundImage: `url(${image.src})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center center",
+              height: "100%",
+              width: "100%"
+            }
+          },
+          image.key
+        ))
+      }
+    )
+  ] });
 }
 
 // components/options/Options.tsx
@@ -7021,8 +7049,8 @@ var PositionWrapper = ({ settings, styles, children, ...props }) => {
 var WidthWrapper = ({ settings, styles, children, ...props }) => {
   const { width: container } = settings;
   const defaultStyles = {
-    "center": {},
-    "full": {}
+    "center": { zIndex: 1 },
+    "full": { zIndex: 1 }
   };
   const defaultProps = {
     "center": { size: "lg", p: "sm", fluid: false },
@@ -7062,7 +7090,7 @@ function Section({ section }) {
       return b.settings.allowed === "always";
     }
   });
-  const columns = sectionBlocks.reduce((acc, d) => {
+  const columns = sectionBlocks.filter((d) => d.type !== BLOCK_TYPES.GENERATOR).reduce((acc, d) => {
     if (!acc[d.blockcol]) {
       acc[d.blockcol] = { [d.blockrow]: d };
     } else {
@@ -7078,6 +7106,7 @@ function Section({ section }) {
   return /* @__PURE__ */ jsxs(
     PositionWrapper,
     {
+      className: `bespoke-Section-${id} bespoke-Section-root `,
       settings: sectionSettings2,
       styles: sectionStyles?.root || void 0,
       children: [
@@ -7085,6 +7114,7 @@ function Section({ section }) {
         /* @__PURE__ */ jsxs(
           WidthWrapper,
           {
+            className: `bespoke-Section-${id} bespoke-Section-container `,
             settings: sectionSettings2,
             styles: sectionStyles?.container,
             id: `section-${id}`,
@@ -7094,34 +7124,52 @@ function Section({ section }) {
                 /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
                 sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: section.id })
               ] }),
-              /* @__PURE__ */ jsx(StyleWrapper, { className: "bespoke-section-content", settings: sectionSettings2, styles: sectionStyles?.content, children: /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
-                const column = columns[columnIndex];
-                const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
-                return /* @__PURE__ */ jsx(
-                  SectionColumn,
-                  {
-                    column,
-                    columnSettings,
-                    sx: { flexBasis: `${100 / colsQty}%` },
-                    children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
-                      if (!item.id)
-                        return null;
-                      const { settings: settings2, type } = blockRecords[item.id];
-                      const blockWidth = settings2.width && !settings2.width.stretch && settings2.width.unit ? formatters[settings2.width.unit](settings2.width.value) : settings2.display === "inline" ? "auto" : "100%";
-                      const blockStyles = {
-                        alignSelf: type === "visualization" ? "stretch" : "flex-start",
-                        flexGrow: 0,
-                        margin: "0",
-                        textAlign: settings2.align || blockSettings.align.defaultValue,
-                        width: blockWidth,
-                        minWidth: 300
-                      };
-                      return /* @__PURE__ */ jsx(Box, { sx: blockStyles, py: site_default.block.padding, children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id) }, item.id);
-                    })
-                  },
-                  columnIndex
-                );
-              }) }) })
+              /* @__PURE__ */ jsx(
+                StyleWrapper,
+                {
+                  className: `bespoke-Section-${id} bespoke-Section-container`,
+                  settings: sectionSettings2,
+                  styles: sectionStyles?.content,
+                  children: /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
+                    const column = columns[columnIndex];
+                    const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
+                    return /* @__PURE__ */ jsx(
+                      SectionColumn,
+                      {
+                        column,
+                        columnSettings,
+                        sx: { flexBasis: `${100 / colsQty}%` },
+                        children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
+                          if (!item.id || !status[item.id].allowed)
+                            return null;
+                          const { settings: settings2, type } = blockRecords[item.id];
+                          const blockWidth = settings2.width && !settings2.width.stretch && settings2.width.unit ? formatters[settings2.width.unit](settings2.width.value) : settings2.display === "inline" ? "auto" : "100%";
+                          const blockStyles = {
+                            alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                            flexGrow: 0,
+                            margin: "0",
+                            textAlign: settings2.align || blockSettings.align.defaultValue,
+                            width: blockWidth,
+                            minWidth: 300
+                          };
+                          return /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              className: "bespoke-Block-wrapper",
+                              id: `bespoke-Block-${item.id}`,
+                              sx: blockStyles,
+                              py: site_default.block.padding,
+                              children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id)
+                            },
+                            item.id
+                          );
+                        })
+                      },
+                      columnIndex
+                    );
+                  }) })
+                }
+              )
             ]
           }
         )
@@ -10601,7 +10649,6 @@ function SectionEditor({
           }
         ),
         /* @__PURE__ */ jsxs(Box, { pos: "relative", children: [
-          memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
           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 })
@@ -10628,13 +10675,15 @@ function SectionEditor({
               ] }, `block-${item.id}`))
             }
           ),
+          memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
           /* @__PURE__ */ jsxs(
             ColumnsWrapper,
             {
               ref: columnContainer,
               containerProps: {
                 mih: !isActive || !columnsQty ? 120 : "none",
-                p: "md"
+                p: "md",
+                style: { zIndex: 1 }
               },
               children: [
                 /* @__PURE__ */ jsxs(DragDropContext, { onDragEnd, onDragStart, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {