@overmap-ai/core 1.0.34-image-preview.0 → 1.0.34-image-preview.2

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";
@@ -10258,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: CopyIcon,
+        key: "duplicate",
+        text: "Duplicate",
+        buttonProps: { onClick: duplicate }
+      },
+      {
+        Icon: TrashIcon,
+        buttonProps: { onClick: remove2 },
+        key: "delete",
+        text: "Delete"
+      }
+    ];
+    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.unshift({
+        Icon: ArrowDownIcon,
+        key: "moveDown",
+        text: "Move down",
+        buttonProps: {
+          onClick: () => {
+            move("down");
+          }
+        }
+      });
+    }
+    if (sectionIndex === void 0 && index2 !== 0 || sectionIndex !== void 0 && (sectionIndex !== 0 || index2 !== 0)) {
+      actions2.unshift({
+        Icon: ArrowUpIcon,
+        key: "moveUp",
+        text: "Move up",
+        buttonProps: {
+          onClick: () => {
+            move("up");
+          }
+        }
+      });
+    }
+    return actions2;
+  }, [duplicate, index2, move, remove2, sectionIndex, values.fields]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Flex, { display: forMobile(false, "flex"), direction: "column", gap: "4", 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"],
@@ -10288,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(
@@ -10671,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;
@@ -10731,10 +10667,8 @@ const FieldWithActions = memo((props) => {
           {
             index: index2,
             sectionIndex,
-            type: field.type,
             remove: remove2,
             duplicate: duplicateField,
-            addAfter: createFieldAfter,
             move: moveField
           }
         )
@@ -10743,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;
@@ -10931,7 +10871,6 @@ const FieldSectionWithActions = memo((props) => {
             FieldActions,
             {
               index: sectionIndex,
-              type: field.type,
               remove: removeSection,
               duplicate: duplicateSection,
               move: moveSection