@overmap-ai/forms 1.0.11 → 1.0.12-fix-dropdown-error.0

package/dist/builder/FieldBuilder.d.ts

@@ -1,5 +1,5 @@
 import { NestedFieldPath } from "./typings";
-import { FC, ReactNode } from "react";
+import { FC, Dispatch, SetStateAction } from "react";
 import { FieldTypeIdentifier, ISerializedField } from "@overmap-ai/core";
 import { Form } from '../typings';
 interface FieldOptionsFormProps {
@@ -11,13 +11,14 @@ interface FieldOptionsFormProps {
     handleDirtyChange: (dirty: boolean) => void;
     handleCreateField: (form: Form) => void;
 }
-interface FieldBuilderProps extends Pick<FieldOptionsFormProps, "conditionalSourceFields"> {
+export interface FieldBuilderProps extends Pick<FieldOptionsFormProps, "conditionalSourceFields"> {
     index: number;
     parentPath: NestedFieldPath;
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
     initial?: ISerializedField;
     editing?: boolean;
-    children: ReactNode;
 }
-export type FieldBuilderArgs = Omit<FieldBuilderProps, "children">;
+export type FieldBuilderArgs = Omit<FieldBuilderProps, "children" | "isOpen" | "setIsOpen">;
 export declare const FieldBuilder: FC<FieldBuilderProps>;
 export {};

package/dist/forms.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Flex, Text, useSeverityColor, Checkbox, TextArea, Select, IconButton, Badge, MultiSelect, Button, ButtonList, divButtonProps, Tooltip, Separator, useDiscardAlertDialog, Dialog, DropdownItemMenu, useAlertDialog, useToast } from "@overmap-ai/blocks";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
-import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, useReducer } from "react";
+import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, Fragment as Fragment$1, useReducer } from "react";
 import { CheckCircledIcon, FontFamilyIcon, CalendarIcon, InputIcon, RowsIcon, PlusIcon, Cross1Icon, ListBulletIcon, DropdownMenuIcon, CheckboxIcon, UploadIcon, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DotsVerticalIcon } from "@radix-ui/react-icons";
 import { TextField as TextField$1, Box, Card, Heading, Avatar, Em, Strong, Tabs } from "@radix-ui/themes";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
@@ -1992,7 +1992,7 @@ const FieldOptionsForm = memo(function FieldOptionsForm2(props) {
   );
 });
 const FieldBuilder = memo(function FieldBuilder2(props) {
-  const { parentPath, index, children, initial, editing, conditionalSourceFields } = props;
+  const { parentPath, index, isOpen, setIsOpen, initial, editing, conditionalSourceFields } = props;
   const [fieldType, setFieldType] = useState();
   const [formIsDirty, setFormIsDirty] = useState(false);
   const type = (initial == null ? void 0 : initial.type) ?? fieldType;
@@ -2008,21 +2008,21 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
     setFieldType(void 0);
     setFormIsDirty(false);
   }, []);
-  const handleCloseInterrupt = useCallback(
-    (confirmClose) => {
-      if (formIsDirty) {
+  const handleCloseDialog = useCallback(
+    (force) => {
+      if (force || !formIsDirty) {
+        setFieldType(void 0);
+        setIsOpen(false);
+      } else {
         openConfirmDiscardChangesDialog({
           onDiscard: () => {
             setFieldType(void 0);
-            confirmClose();
+            setIsOpen(false);
           }
         });
-      } else {
-        setFieldType(void 0);
-        confirmClose();
       }
     },
-    [formIsDirty, openConfirmDiscardChangesDialog]
+    [formIsDirty, openConfirmDiscardChangesDialog, setIsOpen]
   );
   const handleCreateField = useCallback(
     (form, closeDialog) => {
@@ -2073,22 +2073,32 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
     },
     [conditionalSourceFields, handleCancel, handleCreateField, handleDirtyChange, initial, showChooseField, type]
   );
-  return /* @__PURE__ */ jsx(Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      title: title2,
+      description: description2,
+      content: dialogContent,
+      open: isOpen,
+      onOpenChange: handleCloseDialog
+    }
+  );
 });
-const DefaultWrapper = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
 const forMobile = (mobile, display) => ({
   initial: mobile ? display : "none",
   sm: mobile ? "none" : display
 });
 const FieldActions = memo(function FieldActions2(props) {
   const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   const actions = useMemo(
     () => [
       {
-        Wrapper: FieldBuilder,
-        wrapperProps: editProps,
+        SelectedContent: FieldBuilder,
+        selectedContentProps: { ...editProps, isOpen: isDialogOpen, setIsOpen: setIsDialogOpen },
         Icon: Pencil1Icon,
-        text: "Edit"
+        text: "Edit",
+        buttonProps: { onClick: () => setIsDialogOpen(true) }
       },
       {
         Icon: TrashIcon,
@@ -2098,16 +2108,18 @@ const FieldActions = memo(function FieldActions2(props) {
         text: "Delete"
       },
       {
-        Wrapper: FieldBuilder,
-        wrapperProps: duplicateProps,
+        SelectedContent: FieldBuilder,
+        selectedContentProps: { ...duplicateProps, isOpen: isDialogOpen, setIsOpen: setIsDialogOpen },
         Icon: CopyIcon,
-        text: "Duplicate"
+        text: "Duplicate",
+        buttonProps: { onClick: () => setIsDialogOpen(true) }
       },
       {
-        Wrapper: FieldBuilder,
-        wrapperProps: insertAfterProps,
+        SelectedContent: FieldBuilder,
+        selectedContentProps: { ...insertAfterProps, isOpen: isDialogOpen, setIsOpen: setIsDialogOpen },
         Icon: PlusIcon,
-        text: "Add after"
+        text: "Add after",
+        buttonProps: { onClick: () => setIsDialogOpen(true) }
       },
       {
         // Wrapping icon in a div so that the asChild turns the button into a div
@@ -2119,12 +2131,14 @@ const FieldActions = memo(function FieldActions2(props) {
         buttonProps: { ...dragHandleProps, asChild: true }
       }
     ],
-    [dragHandleProps, duplicateProps, editProps, insertAfterProps, remove2]
+    [dragHandleProps, duplicateProps, editProps, insertAfterProps, isDialogOpen, remove2]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
-      const Wrapper = Action.Wrapper ?? DefaultWrapper;
-      return /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsx(Action.Icon, {}) }) }, Action.text);
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsx(Action.Icon, {}) }),
+        Action.SelectedContent && /* @__PURE__ */ jsx(Action.SelectedContent, { ...Action.selectedContentProps })
+      ] }, Action.text);
     }) }),
     /* @__PURE__ */ jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsx(
       DropdownItemMenu,
@@ -2135,14 +2149,21 @@ const FieldActions = memo(function FieldActions2(props) {
           var _a;
           if (Action.disableOnMobile)
             return null;
-          const Wrapper = Action.Wrapper ?? DefaultWrapper;
           return {
             ...Action.buttonProps,
             onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
-            content: /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
-              /* @__PURE__ */ jsx(Action.Icon, {}),
-              Action.text
-            ] }) })
+            content: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+                /* @__PURE__ */ jsx(Action.Icon, {}),
+                Action.text
+              ] }),
+              Action.SelectedContent && /* @__PURE__ */ jsx(
+                Action.SelectedContent,
+                {
+                  ...Action.selectedContentProps
+                }
+              )
+            ] }, Action.text)
           };
         }).filter((x) => x !== null)
       }
@@ -2213,6 +2234,7 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { field, index: sectionIndex, dropState } = props;
   const isDropDisabled = (_a = dropState[field.identifier]) == null ? void 0 : _a.disabled;
+  const [isAddFieldDialogOpen, setIsAddFieldDialogOpen] = useState(false);
   const { setFieldValue, values } = useFormikContext();
   const alertDialog = useAlertDialog();
   const takenFieldLabels = getTakenFieldLabels(values.fields);
@@ -2403,10 +2425,26 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
                   child.identifier
                 )),
                 droppableProvided.placeholder,
-                /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
-                  /* @__PURE__ */ jsx(PlusIcon, {}),
-                  " Add a field"
-                ] }) })
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    onClick: () => setIsAddFieldDialogOpen(true),
+                    children: [
+                      /* @__PURE__ */ jsx(PlusIcon, {}),
+                      " Add a field"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FieldBuilder,
+                  {
+                    ...insertFieldAtEndOfSection,
+                    isOpen: isAddFieldDialogOpen,
+                    setIsOpen: setIsAddFieldDialogOpen
+                  }
+                )
               ]
             }
           ) })
@@ -2489,6 +2527,7 @@ const findSection = (fields, sectionId) => {
 const FieldsEditor = memo(function FieldsEditor2() {
   const { values, setFieldValue } = useFormikContext();
   const [dropState, dispatch] = useReducer(reducer, values.fields, initializer);
+  const [isAddSectionDialogOpen, setIsAddSectionDialogOpen] = useState(false);
   const { showInfo } = useToast();
   useEffect(() => {
     dispatch({ type: "update", state: initializer(values.fields) });
@@ -2576,10 +2615,18 @@ const FieldsEditor = memo(function FieldsEditor2() {
           field.label
         )),
         droppableProvided.placeholder,
-        /* @__PURE__ */ jsx(FieldBuilder, { ...makeFieldSectionProps, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsAddSectionDialogOpen(true), children: [
           /* @__PURE__ */ jsx(PlusIcon, {}),
           " Add a section"
-        ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FieldBuilder,
+          {
+            ...makeFieldSectionProps,
+            isOpen: isAddSectionDialogOpen,
+            setIsOpen: setIsAddSectionDialogOpen
+          }
+        )
       ]
     }
   ) }) });