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

package/dist/forms.umd.cjs

@@ -1985,7 +1985,7 @@ var __publicField = (obj, key, value) => {
     );
   });
   const FieldBuilder = React.memo(function FieldBuilder2(props) {
-    const { parentPath, index, children, initial, editing, conditionalSourceFields } = props;
+    const { parentPath, index, isOpen, setIsOpen, initial, editing, conditionalSourceFields } = props;
     const [fieldType, setFieldType] = React.useState();
     const [formIsDirty, setFormIsDirty] = React.useState(false);
     const type = (initial == null ? void 0 : initial.type) ?? fieldType;
@@ -2001,21 +2001,21 @@ var __publicField = (obj, key, value) => {
       setFieldType(void 0);
       setFormIsDirty(false);
     }, []);
-    const handleCloseInterrupt = React.useCallback(
-      (confirmClose) => {
-        if (formIsDirty) {
+    const handleCloseDialog = React.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 = React.useCallback(
       (form, closeDialog) => {
@@ -2066,22 +2066,32 @@ var __publicField = (obj, key, value) => {
       },
       [conditionalSourceFields, handleCancel, handleCreateField, handleDirtyChange, initial, showChooseField, type]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(blocks.Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      blocks.Dialog,
+      {
+        title: title2,
+        description: description2,
+        content: dialogContent,
+        open: isOpen,
+        onOpenChange: handleCloseDialog
+      }
+    );
   });
-  const DefaultWrapper = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   const forMobile = (mobile, display) => ({
     initial: mobile ? display : "none",
     sm: mobile ? "none" : display
   });
   const FieldActions = React.memo(function FieldActions2(props) {
     const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
+    const [isDialogOpen, setIsDialogOpen] = React.useState(false);
     const actions = React.useMemo(
       () => [
         {
-          Wrapper: FieldBuilder,
-          wrapperProps: editProps,
+          SelectedContent: FieldBuilder,
+          selectedContentProps: { ...editProps, isOpen: isDialogOpen, setIsOpen: setIsDialogOpen },
           Icon: reactIcons.Pencil1Icon,
-          text: "Edit"
+          text: "Edit",
+          buttonProps: { onClick: () => setIsDialogOpen(true) }
         },
         {
           Icon: reactIcons.TrashIcon,
@@ -2091,16 +2101,18 @@ var __publicField = (obj, key, value) => {
           text: "Delete"
         },
         {
-          Wrapper: FieldBuilder,
-          wrapperProps: duplicateProps,
+          SelectedContent: FieldBuilder,
+          selectedContentProps: { ...duplicateProps, isOpen: isDialogOpen, setIsOpen: setIsDialogOpen },
           Icon: reactIcons.CopyIcon,
-          text: "Duplicate"
+          text: "Duplicate",
+          buttonProps: { onClick: () => setIsDialogOpen(true) }
         },
         {
-          Wrapper: FieldBuilder,
-          wrapperProps: insertAfterProps,
+          SelectedContent: FieldBuilder,
+          selectedContentProps: { ...insertAfterProps, isOpen: isDialogOpen, setIsOpen: setIsDialogOpen },
           Icon: reactIcons.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
@@ -2112,12 +2124,14 @@ var __publicField = (obj, key, value) => {
           buttonProps: { ...dragHandleProps, asChild: true }
         }
       ],
-      [dragHandleProps, duplicateProps, editProps, insertAfterProps, remove2]
+      [dragHandleProps, duplicateProps, editProps, insertAfterProps, isDialogOpen, remove2]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
-        const Wrapper = Action.Wrapper ?? DefaultWrapper;
-        return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}) }) }, Action.text);
+        return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}) }),
+          Action.SelectedContent && /* @__PURE__ */ jsxRuntime.jsx(Action.SelectedContent, { ...Action.selectedContentProps })
+        ] }, Action.text);
       }) }),
       /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsxRuntime.jsx(
         blocks.DropdownItemMenu,
@@ -2128,14 +2142,21 @@ var __publicField = (obj, key, value) => {
             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__ */ jsxRuntime.jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}),
-                Action.text
-              ] }) })
+              content: /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}),
+                  Action.text
+                ] }),
+                Action.SelectedContent && /* @__PURE__ */ jsxRuntime.jsx(
+                  Action.SelectedContent,
+                  {
+                    ...Action.selectedContentProps
+                  }
+                )
+              ] }, Action.text)
             };
           }).filter((x) => x !== null)
         }
@@ -2206,6 +2227,7 @@ var __publicField = (obj, key, value) => {
     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] = React.useState(false);
     const { setFieldValue, values } = formik.useFormikContext();
     const alertDialog = blocks.useAlertDialog();
     const takenFieldLabels = getTakenFieldLabels(values.fields);
@@ -2396,10 +2418,26 @@ var __publicField = (obj, key, value) => {
                     child.identifier
                   )),
                   droppableProvided.placeholder,
-                  /* @__PURE__ */ jsxRuntime.jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "outline", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PlusIcon, {}),
-                    " Add a field"
-                  ] }) })
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    blocks.Button,
+                    {
+                      type: "button",
+                      variant: "outline",
+                      onClick: () => setIsAddFieldDialogOpen(true),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PlusIcon, {}),
+                        " Add a field"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FieldBuilder,
+                    {
+                      ...insertFieldAtEndOfSection,
+                      isOpen: isAddFieldDialogOpen,
+                      setIsOpen: setIsAddFieldDialogOpen
+                    }
+                  )
                 ]
               }
             ) })
@@ -2482,6 +2520,7 @@ var __publicField = (obj, key, value) => {
   const FieldsEditor = React.memo(function FieldsEditor2() {
     const { values, setFieldValue } = formik.useFormikContext();
     const [dropState, dispatch] = React.useReducer(reducer, values.fields, initializer);
+    const [isAddSectionDialogOpen, setIsAddSectionDialogOpen] = React.useState(false);
     const { showInfo } = blocks.useToast();
     React.useEffect(() => {
       dispatch({ type: "update", state: initializer(values.fields) });
@@ -2569,10 +2608,18 @@ var __publicField = (obj, key, value) => {
             field.label
           )),
           droppableProvided.placeholder,
-          /* @__PURE__ */ jsxRuntime.jsx(FieldBuilder, { ...makeFieldSectionProps, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "outline", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "outline", onClick: () => setIsAddSectionDialogOpen(true), children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PlusIcon, {}),
             " Add a section"
-          ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldBuilder,
+            {
+              ...makeFieldSectionProps,
+              isOpen: isAddSectionDialogOpen,
+              setIsOpen: setIsAddSectionDialogOpen
+            }
+          )
         ]
       }
     ) }) });