@overmap-ai/core 1.0.33 → 1.0.34-image-preview.1

package/dist/forms/builder/FieldActions.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
-import { FieldTypeIdentifier } from "../typings";
 interface FieldActionsProps {
     index: number;
     sectionIndex?: number;
-    type: FieldTypeIdentifier;
     remove: () => void;
     duplicate: () => void;
-    addAfter?: (type: FieldTypeIdentifier) => void;
     move: (direction: "up" | "down") => void;
 }
 export declare const FieldActions: import("react").MemoExoticComponent<(props: FieldActionsProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/overmap-core.js

@@ -8,7 +8,7 @@ var _a;
 import * as React from "react";
 import React__default, { useState, useEffect, useRef, memo, useMemo, forwardRef, createElement, useCallback, createContext, useContext, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useReducer } from "react";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { unsafeShowToast, AlertDialogProvider, ToastProvider, DefaultTheme, Flex, Text, useSeverityColor, Checkbox, TextArea, Select, useToast, IconButton, Badge, MultiSelect, Button, ButtonList, divButtonProps, Tooltip, DropdownItemMenu, DropdownMenu, DropdownMenuItemGroup, DropdownMenuSubMenuGroup, Popover, Input, useAlertDialog } from "@overmap-ai/blocks";
+import { unsafeShowToast, AlertDialogProvider, ToastProvider, DefaultTheme, Flex, Text, useSeverityColor, Checkbox, TextArea, Select, useToast, IconButton, Badge, MultiSelect, Button, ButtonList, divButtonProps, Tooltip, DropdownItemMenu, Popover, Input, useAlertDialog } from "@overmap-ai/blocks";
 import { DepGraph } from "dependency-graph";
 import { offline as offline$1 } from "@redux-offline/redux-offline";
 import offlineConfig from "@redux-offline/redux-offline/lib/defaults";
@@ -26,6 +26,7 @@ import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
 import get from "lodash.get";
 import Linkify from "linkify-react";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { saveAs } from "file-saver";
 import set from "lodash.set";
 import cloneDeep from "lodash.clonedeep";
 import { flushSync } from "react-dom";
@@ -5887,8 +5888,8 @@ class FileService extends BaseApiService {
       if (!extension) {
         throw new Error("File has no extension");
       }
-      const fileName = downloadedName ?? actualSha1 + "." + extension;
-      file = getRenamedFile(file, fileName);
+      const fileName2 = downloadedName ?? actualSha1 + "." + extension;
+      file = getRenamedFile(file, fileName2);
       if (!file.name) {
         throw new Error("Failed to set file's name");
       }
@@ -6334,6 +6335,24 @@ var ArrowDownIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
     clipRule: "evenodd"
   }));
 });
+var _excluded$f = ["color"];
+var ArrowLeftIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
 var _excluded$j = ["color"];
 var ArrowUpIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
@@ -6460,6 +6479,24 @@ var DotsVerticalIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
     clipRule: "evenodd"
   }));
 });
+var _excluded$1P = ["color"];
+var DownloadIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$1P);
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
 var _excluded$1W = ["color"];
 var DropdownMenuIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$1W);
@@ -9150,9 +9187,23 @@ class FieldInputClonerField extends CustomField {
     super(options, FieldInputCloner);
   }
 }
-const previewImage = "_previewImage_1ig84_1";
+const previewImage = "_previewImage_y4yd1_1";
+const nameContainer = "_nameContainer_y4yd1_9";
+const hasPreview = "_hasPreview_y4yd1_14";
+const useEllipsis = "_useEllipsis_y4yd1_19";
+const FullScreenImageContainer = "_FullScreenImageContainer_y4yd1_25";
+const fileName = "_fileName_y4yd1_35";
+const longIconButton = "_longIconButton_y4yd1_40";
+const FullScreenImage = "_FullScreenImage_y4yd1_25";
 const styles$4 = {
-  previewImage
+  previewImage,
+  nameContainer,
+  hasPreview,
+  useEllipsis,
+  FullScreenImageContainer,
+  fileName,
+  longIconButton,
+  FullScreenImage
 };
 const convertBytesToLargestUnit = (bytes) => {
   const units = ["byte", "kilobyte", "megabyte"];
@@ -9246,6 +9297,7 @@ NumberInput.displayName = "NumberInput";
 const DisplayFile = memo((props) => {
   const { file, field, onRemove, disabled } = props;
   const [resolvedFile, setResolvedFile] = useState(null);
+  const [showPreview, setShowPreview] = useState(false);
   const error2 = useMemo(() => resolvedFile && field.getError([resolvedFile]), [field, resolvedFile]);
   const { url, name, size } = useMemo(() => {
     let url2 = null;
@@ -9270,26 +9322,116 @@ const DisplayFile = memo((props) => {
       setResolvedFile(file);
     }
   }, [file]);
+  const handleDownload = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (!resolvedFile) {
+        throw new Error("Cannot download a file that is not resolved.");
+      }
+      const blob = new Blob([resolvedFile]);
+      saveAs(blob, name);
+    },
+    [name, resolvedFile]
+  );
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: { initial: "column", sm: "row" }, gap: "3", justify: "between", children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "3", align: "center", grow: "1", shrink: "0", children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "soft",
+            "aria-label": `Download ${name}`,
+            onClick: handleDownload,
+            disabled: !resolvedFile,
+            children: /* @__PURE__ */ jsx(DownloadIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            severity: "info",
+            variant: "soft",
+            "aria-label": `Remove ${name}`,
+            disabled,
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx(Cross1Icon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          className: classNames$1(styles$4.nameContainer, { [styles$4.hasPreview]: !!url }),
+          direction: "column",
+          gap: "1",
+          children: [
+            /* @__PURE__ */ jsx(Text, { className: styles$4.useEllipsis, children: name }),
+            /* @__PURE__ */ jsx(Text, { size: "1", children: size }),
+            error2 && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error2 })
+          ]
+        }
+      )
+    ] }),
+    url && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
-        IconButton,
+        "img",
         {
-          severity: "info",
-          variant: "outline",
-          "aria-label": `Remove ${name}`,
-          disabled,
-          onClick: onRemove,
-          children: /* @__PURE__ */ jsx(Cross1Icon, {})
+          className: styles$4.previewImage,
+          src: url,
+          alt: name,
+          onClick: () => {
+            setShowPreview(true);
+          }
         }
       ),
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
-        /* @__PURE__ */ jsx(Text, { children: name }),
-        /* @__PURE__ */ jsx(Text, { size: "1", children: size }),
-        error2 && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error2 })
-      ] })
-    ] }),
-    url && /* @__PURE__ */ jsx("img", { className: styles$4.previewImage, src: url, alt: name })
+      showPreview && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$4.FullScreenImageContainer,
+          onClick: () => {
+            setShowPreview(false);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  className: styles$4.longIconButton,
+                  variant: "soft",
+                  "aria-label": "Exit preview",
+                  onClick: () => {
+                    setShowPreview(false);
+                  },
+                  children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { className: styles$4.fileName, children: name }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  className: styles$4.longIconButton,
+                  variant: "soft",
+                  "aria-label": `Download ${name}`,
+                  onClick: handleDownload,
+                  children: /* @__PURE__ */ jsx(DownloadIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: styles$4.FullScreenImage,
+                src: url,
+                alt: name,
+                onClick: (e) => {
+                  e.stopPropagation();
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] })
   ] }) });
 });
 DisplayFile.displayName = "DisplayFile";
@@ -10116,6 +10258,98 @@ const styles$1 = {
   typeBadge: typeBadge$1,
   addSectionButton
 };
+const forMobile = (mobile, display) => ({
+  initial: mobile ? display : "none",
+  sm: mobile ? "none" : display
+});
+const FieldActions = memo((props) => {
+  const { index: index2, sectionIndex, remove: remove2, duplicate, move } = props;
+  const { values } = useFormikContext();
+  const actions = useMemo(() => {
+    const actions2 = [
+      {
+        Icon: TrashIcon,
+        buttonProps: { onClick: remove2 },
+        key: "delete",
+        text: "Delete"
+      },
+      {
+        Icon: CopyIcon,
+        key: "duplicate",
+        text: "Duplicate",
+        buttonProps: { onClick: duplicate }
+      }
+    ];
+    if (sectionIndex === void 0 && index2 !== 0 || sectionIndex !== void 0 && (sectionIndex !== 0 || index2 !== 0)) {
+      actions2.push({
+        Icon: ArrowUpIcon,
+        key: "moveUp",
+        text: "Move up",
+        buttonProps: {
+          onClick: () => {
+            move("up");
+          }
+        }
+      });
+    }
+    if (sectionIndex === void 0 && index2 !== values.fields.length - 1 || sectionIndex !== void 0 && (sectionIndex < values.fields.length - 1 || index2 !== values.fields[sectionIndex].fields.length - 1)) {
+      actions2.push({
+        Icon: ArrowDownIcon,
+        key: "moveDown",
+        text: "Move down",
+        buttonProps: {
+          onClick: () => {
+            move("down");
+          }
+        }
+      });
+    }
+    return actions2;
+  }, [duplicate, index2, move, remove2, sectionIndex, values.fields]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        type: "button",
+        variant: "ghost",
+        severity: Action.key.startsWith("move") ? "info" : "primary",
+        "aria-label": Action.text,
+        ...Action.buttonProps,
+        children: /* @__PURE__ */ jsx(Action.Icon, {})
+      },
+      Action.key
+    )) }),
+    /* @__PURE__ */ jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsx(
+      DropdownItemMenu,
+      {
+        trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
+        items: actions.map((Action) => {
+          var _a2;
+          return {
+            content: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+              /* @__PURE__ */ jsx(Action.Icon, {}),
+              Action.text
+            ] }, Action.key),
+            onSelect: (_a2 = Action.buttonProps) == null ? void 0 : _a2.onClick
+          };
+        })
+      }
+    ) })
+  ] });
+});
+FieldActions.displayName = "FieldActions";
+const popoverInputsContainer = "_popoverInputsContainer_ny0l1_1";
+const typeBadge = "_typeBadge_ny0l1_5";
+const previewInput = "_previewInput_ny0l1_10";
+const directInput = "_directInput_ny0l1_14";
+const grow = "_grow_ny0l1_18";
+const styles = {
+  popoverInputsContainer,
+  typeBadge,
+  previewInput,
+  directInput,
+  grow
+};
 const formId = "form-builder";
 const fieldsToChoose = [
   ["string", "text"],
@@ -10146,147 +10380,6 @@ const useFieldTypeItems = (onSelect = () => null) => {
     });
   }, [onSelect]);
 };
-const FieldTypeDropdown = memo((props) => {
-  const { setFieldType, children } = props;
-  const fieldTypeItems = useFieldTypeItems(setFieldType);
-  return /* @__PURE__ */ jsx(DropdownItemMenu, { trigger: children, items: fieldTypeItems.flat() });
-});
-FieldTypeDropdown.displayName = "FieldTypeDropdown";
-const forMobile = (mobile, display) => ({
-  initial: mobile ? display : "none",
-  sm: mobile ? "none" : display
-});
-const FieldActions = memo((props) => {
-  const { index: index2, sectionIndex, type, remove: remove2, duplicate, addAfter, move } = props;
-  if (type !== "section" && !addAfter) {
-    throw new Error("addAfter is required for non-section fields");
-  }
-  const { values } = useFormikContext();
-  const fieldTypeItems = useFieldTypeItems(addAfter);
-  const [actions, mobileActions] = useMemo(() => {
-    const getActions = (isMobile) => {
-      const actions2 = [
-        {
-          Icon: TrashIcon,
-          buttonProps: { onClick: remove2 },
-          key: "delete",
-          text: "Delete"
-        },
-        {
-          Icon: CopyIcon,
-          key: "duplicate",
-          text: "Duplicate",
-          buttonProps: { onClick: duplicate }
-        }
-      ];
-      if (type !== "section") {
-        actions2.push({
-          // We want to show a dropdown with field types if "Add after" is clicked
-          isComponent: true,
-          Component: isMobile ? /* @__PURE__ */ jsx(DropdownMenuItemGroup, { items: fieldTypeItems.flat() }) : /* @__PURE__ */ jsx(FieldTypeDropdown, { setFieldType: addAfter, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": "Add after", children: /* @__PURE__ */ jsx(PlusIcon, {}) }) }),
-          Icon: PlusIcon,
-          key: "add",
-          text: "Add after"
-        });
-      }
-      if (sectionIndex === void 0 && index2 !== 0 || sectionIndex !== void 0 && (sectionIndex !== 0 || index2 !== 0)) {
-        actions2.push({
-          Icon: ArrowUpIcon,
-          key: "moveUp",
-          text: "Move up",
-          buttonProps: {
-            onClick: () => {
-              move("up");
-            }
-          }
-        });
-      }
-      if (sectionIndex === void 0 && index2 !== values.fields.length - 1 || sectionIndex !== void 0 && (sectionIndex < values.fields.length - 1 || index2 !== values.fields[sectionIndex].fields.length - 1)) {
-        actions2.push({
-          Icon: ArrowDownIcon,
-          key: "moveDown",
-          text: "Move down",
-          buttonProps: {
-            onClick: () => {
-              move("down");
-            }
-          }
-        });
-      }
-      return actions2;
-    };
-    return [getActions(false), getActions(true)];
-  }, [addAfter, duplicate, fieldTypeItems, index2, move, remove2, sectionIndex, type, values.fields]);
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
-      if (Action.isComponent) {
-        return Action.Component;
-      }
-      return /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          variant: "ghost",
-          severity: Action.key.startsWith("move") ? "info" : "primary",
-          "aria-label": Action.text,
-          ...Action.buttonProps,
-          children: /* @__PURE__ */ jsx(Action.Icon, {})
-        },
-        Action.key
-      );
-    }) }),
-    /* @__PURE__ */ jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsxs(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
-        children: [
-          /* @__PURE__ */ jsx(
-            DropdownMenuItemGroup,
-            {
-              items: mobileActions.filter((Action) => !Action.isComponent).map((Action) => {
-                var _a2;
-                return {
-                  content: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
-                    /* @__PURE__ */ jsx(Action.Icon, {}),
-                    Action.text
-                  ] }, Action.key),
-                  value: Action.key,
-                  onSelect: (_a2 = Action.buttonProps) == null ? void 0 : _a2.onClick
-                };
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DropdownMenuSubMenuGroup,
-            {
-              items: mobileActions.filter((Action) => Action.isComponent).map((Action) => ({
-                content: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
-                  /* @__PURE__ */ jsx(Action.Icon, {}),
-                  Action.text
-                ] }, Action.key),
-                subContent: Action.Component,
-                triggerIndicator: null
-              }))
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-});
-FieldActions.displayName = "FieldActions";
-const popoverInputsContainer = "_popoverInputsContainer_ny0l1_1";
-const typeBadge = "_typeBadge_ny0l1_5";
-const previewInput = "_previewInput_ny0l1_10";
-const directInput = "_directInput_ny0l1_14";
-const grow = "_grow_ny0l1_18";
-const styles = {
-  popoverInputsContainer,
-  typeBadge,
-  previewInput,
-  directInput,
-  grow
-};
 const FieldSettingsPopover = memo((props) => {
   const { popoverInputs, hasError } = props;
   return /* @__PURE__ */ jsx(
@@ -10529,21 +10622,6 @@ const FieldWithActions = memo((props) => {
     };
     createNewField(parentPath, index2 + 1, duplicatedField, values, setFieldValue);
   }, [field, takenLabels, parentPath, index2, values, setFieldValue]);
-  const createFieldAfter = useCallback(
-    (type) => {
-      if (type === "section") {
-        throw new Error("Section type unexpected");
-      }
-      createNewField(
-        parentPath,
-        index2 + 1,
-        FieldTypeToEmptyFieldMapping[type],
-        values,
-        setFieldValue
-      );
-    },
-    [parentPath, index2, values, setFieldValue]
-  );
   const moveField = useCallback(
     (direction) => {
       const srcSectionIndex = sectionIndex;
@@ -10589,10 +10667,8 @@ const FieldWithActions = memo((props) => {
           {
             index: index2,
             sectionIndex,
-            type: field.type,
             remove: remove2,
             duplicate: duplicateField,
-            addAfter: createFieldAfter,
             move: moveField
           }
         )
@@ -10601,6 +10677,12 @@ const FieldWithActions = memo((props) => {
   ) });
 });
 FieldWithActions.displayName = "FieldWithActions";
+const FieldTypeDropdown = memo((props) => {
+  const { setFieldType, children } = props;
+  const fieldTypeItems = useFieldTypeItems(setFieldType);
+  return /* @__PURE__ */ jsx(DropdownItemMenu, { trigger: children, items: fieldTypeItems.flat() });
+});
+FieldTypeDropdown.displayName = "FieldTypeDropdown";
 const FieldSectionWithActions = memo((props) => {
   var _a2;
   const { field, index: sectionIndex, dropState } = props;
@@ -10789,7 +10871,6 @@ const FieldSectionWithActions = memo((props) => {
             FieldActions,
             {
               index: sectionIndex,
-              type: field.type,
               remove: removeSection,
               duplicate: duplicateSection,
               move: moveSection