@overmap-ai/forms 1.0.32-react-flow-david-fixes.13 → 1.0.32-react-flow-david-fixes.14

package/dist/form/conditions/components/MultiStringPopover.d.ts

@@ -0,0 +1,9 @@
+import { Popover } from '@overmap-ai/blocks';
+import { ComponentPropsWithoutRef } from 'react';
+interface MultiStringPopoverProps extends ComponentPropsWithoutRef<typeof Popover.Root>, ComponentPropsWithoutRef<typeof Popover.Content> {
+    placeholder?: string;
+    values: string[];
+    onValuesChange: (values: string[]) => void;
+}
+export declare const MultiStringPopover: import('react').NamedExoticComponent<MultiStringPopoverProps>;
+export {};

package/dist/form/conditions/components/NumberInputPopover.d.ts

@@ -0,0 +1,9 @@
+import { Popover } from '@overmap-ai/blocks';
+import { ComponentPropsWithoutRef } from 'react';
+interface NumberInputPopoverProps extends ComponentPropsWithoutRef<typeof Popover.Root>, ComponentPropsWithoutRef<typeof Popover.Content> {
+    placeholder?: string;
+    value?: number | null;
+    onValueChange?: (value: number | null) => void;
+}
+export declare const NumberInputPopover: import('react').NamedExoticComponent<NumberInputPopoverProps>;
+export {};

package/dist/form/conditions/components/index.d.ts

@@ -1,6 +1,8 @@
 export * from './ConditionModifierDropdown';
 export * from './constants';
 export * from './DayPickerPopover';
+export * from './MultiStringPopover';
+export * from './NumberInputPopover';
 export * from './RemoveConditionButton';
 export * from './SelectFieldOptionMultiSelectGroup';
 export * from './SelectFieldOptionSelectGroup';

package/dist/forms.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Card, LuIcon, Text, Spinner, ButtonGroup, Tooltip, IconButton, Separator, Input, Badge, Checkbox, CheckboxGroup, Popover, Button, DayPicker, Menu, OneTimePasswordField, RadioGroup, TextArea, useToast, stopPropagation, Heading, HoverCard, ToggleGroup } from "@overmap-ai/blocks";
+import { Card, LuIcon, Text, Spinner, ButtonGroup, Tooltip, IconButton, Separator, Input, Badge, Checkbox, CheckboxGroup, Popover, Button, DayPicker, Menu, OneTimePasswordField, RadioGroup, TextArea, useToast, stopPropagation, Heading, ToggleGroup } from "@overmap-ai/blocks";
 import { cx } from "class-variance-authority";
 import * as React from "react";
 import { memo, forwardRef, createContext, useContext, useState, useRef, useCallback, useMemo, useEffect, Fragment as Fragment$1, use, useLayoutEffect, useId as useId$1 } from "react";
@@ -2425,7 +2425,7 @@ const MultiStringInput = memo((props) => {
               "aria-label": "Add option",
               disabled: !!internalError || disabled,
               onClick: addOption,
-              children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx(Plus, {})
             }
           )
         ] })
@@ -33032,7 +33032,7 @@ class BaseCondition extends Observable {
       id: this.id,
       type: this.field.type,
       fieldId: this.field.identifier,
-      conditionValue: this.modifiers[this.conditionModifier].modifier.serialize(this.conditionValue),
+      conditionValue: this.conditionValue !== void 0 ? this.modifiers[this.conditionModifier].modifier.serialize(this.conditionValue) : void 0,
       conditionModifier: this.conditionModifier
     };
   }
@@ -33121,10 +33121,150 @@ const DayPickerPopover = memo((props) => {
   const { children, open, onOpenChange, defaultOpen, modal, size, align, accentColor = "base", ...rest } = props;
   return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, defaultOpen, modal, children: [
     /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx(Popover.Content, { size, align, children: /* @__PURE__ */ jsx(DayPicker, { size, autoFocus: true, accentColor, ...rest }) })
+    /* @__PURE__ */ jsx(Popover.Content, { size, align, children: /* @__PURE__ */ jsx(DayPicker, { size, accentColor, ...rest }) })
   ] });
 });
 DayPickerPopover.displayName = "DayPickerPopover";
+const MultiStringPopover = memo((props) => {
+  const {
+    children,
+    open,
+    onOpenChange,
+    defaultOpen,
+    modal,
+    size,
+    accentColor = "base",
+    values,
+    onValuesChange,
+    placeholder = "Enter text",
+    ...rest
+  } = props;
+  const [inputValue, setInputValue] = useState("");
+  const handleInputValueChange = useCallback((e) => {
+    setInputValue(e.target.value);
+  }, []);
+  const handleInputKeyDown = useCallback(
+    (e) => {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      e.stopPropagation();
+      onValuesChange([...values, inputValue]);
+      setInputValue("");
+    },
+    [inputValue, onValuesChange, values]
+  );
+  const handleAddValueClick = useCallback(() => {
+    onValuesChange([...values, inputValue]);
+    setInputValue("");
+  }, [inputValue, onValuesChange, values]);
+  const handleRemoveValueClick = useCallback(
+    (index) => {
+      const valuesCopy = [...values];
+      valuesCopy.splice(index, 1);
+      onValuesChange(valuesCopy);
+    },
+    [onValuesChange, values]
+  );
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, defaultOpen, modal, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(Popover.Content, { size, onClick: stopPropagation, accentColor, ...rest, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Input.Root, { className: "grow", accentColor: "base", variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(
+          Input.Field,
+          {
+            value: inputValue,
+            onChange: handleInputValueChange,
+            onKeyDown: handleInputKeyDown,
+            placeholder,
+            ...rest
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            accentColor: "base",
+            variant: "soft",
+            type: "button",
+            onClick: handleAddValueClick,
+            children: /* @__PURE__ */ jsx(LuIcon, { icon: "plus" })
+          }
+        )
+      ] }),
+      values.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: values.map((value, index) => /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          className: "flex items-center justify-between gap-2",
+          accentColor: "base",
+          size: "sm",
+          variant: "soft",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: value }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "xs",
+                variant: "ghost",
+                type: "button",
+                accentColor: "base",
+                onClick: () => {
+                  handleRemoveValueClick(index);
+                },
+                children: /* @__PURE__ */ jsx(LuIcon, { icon: "x" })
+              }
+            )
+          ]
+        },
+        `${value}-${index}`
+      )) })
+    ] }) })
+  ] });
+});
+MultiStringPopover.displayName = "NumberInputPopover";
+const NumberInputPopover = memo((props) => {
+  const {
+    children,
+    open,
+    onOpenChange,
+    defaultOpen,
+    modal,
+    size,
+    accentColor = "base",
+    value: controlledValue,
+    onValueChange,
+    placeholder = "Enter a number",
+    ...rest
+  } = props;
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    if (controlledValue !== void 0) setValue(controlledValue);
+  }, [controlledValue]);
+  const handleChange = useCallback((e) => {
+    const valueAsNumber = e.target.valueAsNumber;
+    setValue(!isNaN(valueAsNumber) ? valueAsNumber : null);
+  }, []);
+  const handleBlur = useCallback(
+    (e) => {
+      const valueAsNumber = e.target.valueAsNumber;
+      onValueChange == null ? void 0 : onValueChange(!isNaN(valueAsNumber) ? valueAsNumber : null);
+    },
+    [onValueChange]
+  );
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, defaultOpen, modal, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(Popover.Content, { size, onClick: stopPropagation, ...rest, children: /* @__PURE__ */ jsx(Input.Root, { size, accentColor, children: /* @__PURE__ */ jsx(
+      Input.Field,
+      {
+        placeholder,
+        type: "number",
+        value: value ?? "",
+        onChange: handleChange,
+        onBlur: handleBlur
+      }
+    ) }) })
+  ] });
+});
+NumberInputPopover.displayName = "NumberInputPopover";
 const RemoveConditionButton = (props) => {
   const { condition, onClick, ...rest } = props;
   const handleRemoveFilter = useCallback(() => {
@@ -33592,11 +33732,18 @@ class MultiSelectFieldCondition extends BaseCondition {
     return /* @__PURE__ */ jsx(MultiSelectFieldConditionCell, { condition: this, ...props }, this.id);
   }
 }
+const EMPTY_ARRAY = [];
 const MultiStringFieldConditionCell = (props) => {
   const { condition, onRemove } = props;
   const field = condition.field;
   const conditionValue = condition.getConditionValue();
   const conditionModifier = condition.getConditionModifier();
+  const handleValuesChange = useCallback(
+    (values) => {
+      condition.setConditionValue(values.length > 0 ? values : void 0);
+    },
+    [condition]
+  );
   const getFilterValueRender = () => {
     if (conditionValue === void 0) return "...";
     if (conditionValue === null) return "empty";
@@ -33611,15 +33758,15 @@ const MultiStringFieldConditionCell = (props) => {
         return `${conditionValue.length} values`;
     }
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex w-max max-w-full min-w-0 gap-0.5", size: "sm", variant: "fill", accentColor: "base", children: [
+  return /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex w-max max-w-full min-w-0 gap-0.5", size: "sm", variant: "fill", accentColor: "base", children: [
     /* @__PURE__ */ jsxs(Badge, { className: "min-w-0 shrink-1", size: "sm", variant: "fill", accentColor: "base", children: [
       /* @__PURE__ */ jsx(LuIcon, { icon: fieldIcons[field.type] }),
       /* @__PURE__ */ jsx("span", { className: "truncate", children: field.label || UNLABELLED_FIELD_LABEL })
     ] }),
     /* @__PURE__ */ jsx(ConditionModifierDropdown, { condition, children: /* @__PURE__ */ jsx(Button, { type: "button", children: condition.modifiers[conditionModifier].modifier.label }) }),
-    /* @__PURE__ */ jsx(Button, { type: "button", className: "truncate", children: getFilterValueRender() }),
+    /* @__PURE__ */ jsx(MultiStringPopover, { values: conditionValue ?? EMPTY_ARRAY, onValuesChange: handleValuesChange, children: /* @__PURE__ */ jsx(Button, { type: "button", className: "truncate", children: getFilterValueRender() }) }),
     /* @__PURE__ */ jsx(RemoveConditionButton, { condition, onClick: onRemove })
-  ] }) });
+  ] });
 };
 const modifiers$8 = {
   equals: createConditionModifierConfig({
@@ -33678,88 +33825,55 @@ const NumberFieldConditionCell = (props) => {
   const getFilterValueUi = () => {
     switch (conditionModifier) {
       case "equals":
-      case "notEquals": {
-        const equalsModifier = condition.modifiers.equals;
-        const equalsFilterValue = conditionValue !== void 0 && equalsModifier.isConditionValueValid(conditionValue) ? conditionValue : void 0;
-        return /* @__PURE__ */ jsxs(Menu.Root, { children: [
-          /* @__PURE__ */ jsx(Menu.ClickTrigger, { children: /* @__PURE__ */ jsx(Button, { type: "button", className: "truncate", children: equalsFilterValue !== void 0 ? equalsFilterValue ?? "empty" : "..." }) }),
-          /* @__PURE__ */ jsx(Menu.Content, { size: "sm", children: /* @__PURE__ */ jsx(Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsx(
-            Input.Field,
-            {
-              placeholder: "Enter a number",
-              type: "number",
-              value: equalsFilterValue ?? "",
-              onChange: (e) => {
-                const value = e.target.valueAsNumber;
-                condition.setConditionValue(isNaN(value) ? void 0 : value);
-              }
-            }
-          ) }) })
-        ] });
-      }
       case "greaterThanOrEquals":
       case "lessThanOrEquals":
       case "greaterThan":
       case "lessThan": {
         const greaterThanModifier = condition.modifiers.greaterThan;
         const greaterThanFitlerValue = conditionValue !== void 0 && greaterThanModifier.isConditionValueValid(conditionValue) ? conditionValue : void 0;
-        return /* @__PURE__ */ jsxs(Popover.Root, { children: [
-          /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", className: "truncate", children: greaterThanFitlerValue ?? "..." }) }),
-          /* @__PURE__ */ jsx(Popover.Content, { size: "sm", children: /* @__PURE__ */ jsx(Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsx(
-            Input.Field,
-            {
-              placeholder: "Enter a number",
-              type: "number",
-              value: greaterThanFitlerValue ?? "",
-              onChange: (e) => {
-                const value = e.target.valueAsNumber;
-                condition.setConditionValue(isNaN(value) ? void 0 : value);
-              }
-            }
-          ) }) })
-        ] });
+        return /* @__PURE__ */ jsx(
+          NumberInputPopover,
+          {
+            value: greaterThanFitlerValue ?? null,
+            onValueChange: (value) => condition.setConditionValue(value ?? void 0),
+            size: "sm",
+            children: /* @__PURE__ */ jsx(Button, { type: "button", className: "truncate", children: greaterThanFitlerValue !== void 0 ? greaterThanFitlerValue ?? "empty" : "..." })
+          }
+        );
       }
       case "inRange":
       case "notInRange": {
         const inRangeModifier = condition.modifiers.inRange;
         const rangeFilterValue = conditionValue !== void 0 && inRangeModifier.isConditionValueValid(conditionValue) ? conditionValue : void 0;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Popover.Root, { children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? "..." }) }),
-            /* @__PURE__ */ jsx(Popover.Content, { size: "sm", children: /* @__PURE__ */ jsx(Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsx(
-              Input.Field,
-              {
-                placeholder: "Enter a number",
-                type: "number",
-                value: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? "",
-                onChange: (e) => {
-                  const value = e.target.valueAsNumber;
-                  condition.setConditionValue({
-                    from: !isNaN(value) ? value : null,
-                    to: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? null
-                  });
-                }
-              }
-            ) }) })
-          ] }),
-          /* @__PURE__ */ jsxs(Popover.Root, { children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? "..." }) }),
-            /* @__PURE__ */ jsx(Popover.Content, { size: "sm", children: /* @__PURE__ */ jsx(Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsx(
-              Input.Field,
-              {
-                placeholder: "Enter a number",
-                type: "number",
-                value: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? "",
-                onChange: (e) => {
-                  const value = e.target.valueAsNumber;
-                  condition.setConditionValue({
-                    from: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? null,
-                    to: !isNaN(value) ? value : null
-                  });
-                }
-              }
-            ) }) })
-          ] })
+          /* @__PURE__ */ jsx(
+            NumberInputPopover,
+            {
+              value: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? null,
+              onValueChange: (value) => {
+                condition.setConditionValue({
+                  from: value,
+                  to: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? null
+                });
+              },
+              size: "sm",
+              children: /* @__PURE__ */ jsx(Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? "..." })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NumberInputPopover,
+            {
+              value: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? null,
+              onValueChange: (value) => {
+                condition.setConditionValue({
+                  from: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? null,
+                  to: value
+                });
+              },
+              size: "sm",
+              children: /* @__PURE__ */ jsx(Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? "..." })
+            }
+          )
         ] });
       }
     }
@@ -34707,7 +34821,8 @@ const _FieldSection = class _FieldSection extends BaseFormElement {
   duplicate(identifier) {
     return new _FieldSection({
       ...this.getOptions(),
-      identifier
+      identifier,
+      fields: this.fields.map((field) => field.duplicate(v4()))
     });
   }
   setOptions(options) {
@@ -35152,7 +35267,6 @@ const FieldBuilder = memo((props) => {
     const error = get(errors, field2.identifier);
     return error && (typeof error !== "object" || Object.values(error).length > 0);
   });
-  const previewInput = useFieldInput(field, { formId, showInputOnly: false });
   const handleFieldImageClick = useCallback(() => {
     if (!resolvedImage) return;
     openImageViewer(() => ({
@@ -35229,15 +35343,7 @@ const FieldBuilder = memo((props) => {
         }
       )
     ] }),
-    directlyShownFields.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-full", children: directlyShownInputs }),
-    /* @__PURE__ */ jsx(Separator, { size: "full" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
-      /* @__PURE__ */ jsxs(HoverCard.Root, { children: [
-        /* @__PURE__ */ jsx(HoverCard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Badge, { icon: true, size: "sm", variant: "soft", accentColor: "base", children: /* @__PURE__ */ jsx(LuIcon, { icon: "eye" }) }) }),
-        /* @__PURE__ */ jsx(HoverCard.Content, { className: "w-[225px]", size: "sm", align: "start", children: /* @__PURE__ */ jsx(Text, { size: "sm", accentColor: "base", children: "This is a preview of the field as it will be rendered in the form." }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grow h-max min-w-0", children: previewInput })
-    ] })
+    directlyShownFields.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-full", children: directlyShownInputs })
   ] });
 });
 FieldBuilder.displayName = "FieldBuilder";

package/dist/forms.umd.cjs

@@ -2427,7 +2427,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
                 "aria-label": "Add option",
                 disabled: !!internalError || disabled,
                 onClick: addOption,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {})
               }
             )
           ] })
@@ -33034,7 +33034,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         id: this.id,
         type: this.field.type,
         fieldId: this.field.identifier,
-        conditionValue: this.modifiers[this.conditionModifier].modifier.serialize(this.conditionValue),
+        conditionValue: this.conditionValue !== void 0 ? this.modifiers[this.conditionModifier].modifier.serialize(this.conditionValue) : void 0,
         conditionModifier: this.conditionModifier
       };
     }
@@ -33123,10 +33123,150 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { children, open, onOpenChange, defaultOpen, modal, size, align, accentColor = "base", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Popover.Root, { open, onOpenChange, defaultOpen, modal, children: [
       /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Trigger, { asChild: true, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size, align, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.DayPicker, { size, autoFocus: true, accentColor, ...rest }) })
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size, align, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.DayPicker, { size, accentColor, ...rest }) })
     ] });
   });
   DayPickerPopover.displayName = "DayPickerPopover";
+  const MultiStringPopover = React.memo((props) => {
+    const {
+      children,
+      open,
+      onOpenChange,
+      defaultOpen,
+      modal,
+      size,
+      accentColor = "base",
+      values,
+      onValuesChange,
+      placeholder = "Enter text",
+      ...rest
+    } = props;
+    const [inputValue, setInputValue] = React.useState("");
+    const handleInputValueChange = React.useCallback((e) => {
+      setInputValue(e.target.value);
+    }, []);
+    const handleInputKeyDown = React.useCallback(
+      (e) => {
+        if (e.key !== "Enter") return;
+        e.preventDefault();
+        e.stopPropagation();
+        onValuesChange([...values, inputValue]);
+        setInputValue("");
+      },
+      [inputValue, onValuesChange, values]
+    );
+    const handleAddValueClick = React.useCallback(() => {
+      onValuesChange([...values, inputValue]);
+      setInputValue("");
+    }, [inputValue, onValuesChange, values]);
+    const handleRemoveValueClick = React.useCallback(
+      (index) => {
+        const valuesCopy = [...values];
+        valuesCopy.splice(index, 1);
+        onValuesChange(valuesCopy);
+      },
+      [onValuesChange, values]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Popover.Root, { open, onOpenChange, defaultOpen, modal, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size, onClick: blocks.stopPropagation, accentColor, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { className: "grow", accentColor: "base", variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+            blocks.Input.Field,
+            {
+              value: inputValue,
+              onChange: handleInputValueChange,
+              onKeyDown: handleInputKeyDown,
+              placeholder,
+              ...rest
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            blocks.IconButton,
+            {
+              size: "sm",
+              accentColor: "base",
+              variant: "soft",
+              type: "button",
+              onClick: handleAddValueClick,
+              children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" })
+            }
+          )
+        ] }),
+        values.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          blocks.Badge,
+          {
+            className: "flex items-center justify-between gap-2",
+            accentColor: "base",
+            size: "sm",
+            variant: "soft",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: value }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                blocks.IconButton,
+                {
+                  size: "xs",
+                  variant: "ghost",
+                  type: "button",
+                  accentColor: "base",
+                  onClick: () => {
+                    handleRemoveValueClick(index);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "x" })
+                }
+              )
+            ]
+          },
+          `${value}-${index}`
+        )) })
+      ] }) })
+    ] });
+  });
+  MultiStringPopover.displayName = "NumberInputPopover";
+  const NumberInputPopover = React.memo((props) => {
+    const {
+      children,
+      open,
+      onOpenChange,
+      defaultOpen,
+      modal,
+      size,
+      accentColor = "base",
+      value: controlledValue,
+      onValueChange,
+      placeholder = "Enter a number",
+      ...rest
+    } = props;
+    const [value, setValue] = React.useState(null);
+    React.useEffect(() => {
+      if (controlledValue !== void 0) setValue(controlledValue);
+    }, [controlledValue]);
+    const handleChange = React.useCallback((e) => {
+      const valueAsNumber = e.target.valueAsNumber;
+      setValue(!isNaN(valueAsNumber) ? valueAsNumber : null);
+    }, []);
+    const handleBlur = React.useCallback(
+      (e) => {
+        const valueAsNumber = e.target.valueAsNumber;
+        onValueChange == null ? void 0 : onValueChange(!isNaN(valueAsNumber) ? valueAsNumber : null);
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Popover.Root, { open, onOpenChange, defaultOpen, modal, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size, onClick: blocks.stopPropagation, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { size, accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(
+        blocks.Input.Field,
+        {
+          placeholder,
+          type: "number",
+          value: value ?? "",
+          onChange: handleChange,
+          onBlur: handleBlur
+        }
+      ) }) })
+    ] });
+  });
+  NumberInputPopover.displayName = "NumberInputPopover";
   const RemoveConditionButton = (props) => {
     const { condition, onClick, ...rest } = props;
     const handleRemoveFilter = React.useCallback(() => {
@@ -33594,11 +33734,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectFieldConditionCell, { condition: this, ...props }, this.id);
     }
   }
+  const EMPTY_ARRAY = [];
   const MultiStringFieldConditionCell = (props) => {
     const { condition, onRemove } = props;
     const field = condition.field;
     const conditionValue = condition.getConditionValue();
     const conditionModifier = condition.getConditionModifier();
+    const handleValuesChange = React.useCallback(
+      (values) => {
+        condition.setConditionValue(values.length > 0 ? values : void 0);
+      },
+      [condition]
+    );
     const getFilterValueRender = () => {
       if (conditionValue === void 0) return "...";
       if (conditionValue === null) return "empty";
@@ -33613,15 +33760,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           return `${conditionValue.length} values`;
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex w-max max-w-full min-w-0 gap-0.5", size: "sm", variant: "fill", accentColor: "base", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex w-max max-w-full min-w-0 gap-0.5", size: "sm", variant: "fill", accentColor: "base", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(blocks.Badge, { className: "min-w-0 shrink-1", size: "sm", variant: "fill", accentColor: "base", children: [
         /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: fieldIcons[field.type] }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: field.label || UNLABELLED_FIELD_LABEL })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ConditionModifierDropdown, { condition, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", children: condition.modifiers[conditionModifier].modifier.label }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", className: "truncate", children: getFilterValueRender() }),
+      /* @__PURE__ */ jsxRuntime.jsx(MultiStringPopover, { values: conditionValue ?? EMPTY_ARRAY, onValuesChange: handleValuesChange, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", className: "truncate", children: getFilterValueRender() }) }),
       /* @__PURE__ */ jsxRuntime.jsx(RemoveConditionButton, { condition, onClick: onRemove })
-    ] }) });
+    ] });
   };
   const modifiers$8 = {
     equals: createConditionModifierConfig({
@@ -33680,88 +33827,55 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const getFilterValueUi = () => {
       switch (conditionModifier) {
         case "equals":
-        case "notEquals": {
-          const equalsModifier = condition.modifiers.equals;
-          const equalsFilterValue = conditionValue !== void 0 && equalsModifier.isConditionValueValid(conditionValue) ? conditionValue : void 0;
-          return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Menu.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.ClickTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", className: "truncate", children: equalsFilterValue !== void 0 ? equalsFilterValue ?? "empty" : "..." }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.Content, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-              blocks.Input.Field,
-              {
-                placeholder: "Enter a number",
-                type: "number",
-                value: equalsFilterValue ?? "",
-                onChange: (e) => {
-                  const value = e.target.valueAsNumber;
-                  condition.setConditionValue(isNaN(value) ? void 0 : value);
-                }
-              }
-            ) }) })
-          ] });
-        }
         case "greaterThanOrEquals":
         case "lessThanOrEquals":
         case "greaterThan":
         case "lessThan": {
           const greaterThanModifier = condition.modifiers.greaterThan;
           const greaterThanFitlerValue = conditionValue !== void 0 && greaterThanModifier.isConditionValueValid(conditionValue) ? conditionValue : void 0;
-          return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Popover.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", className: "truncate", children: greaterThanFitlerValue ?? "..." }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-              blocks.Input.Field,
-              {
-                placeholder: "Enter a number",
-                type: "number",
-                value: greaterThanFitlerValue ?? "",
-                onChange: (e) => {
-                  const value = e.target.valueAsNumber;
-                  condition.setConditionValue(isNaN(value) ? void 0 : value);
-                }
-              }
-            ) }) })
-          ] });
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            NumberInputPopover,
+            {
+              value: greaterThanFitlerValue ?? null,
+              onValueChange: (value) => condition.setConditionValue(value ?? void 0),
+              size: "sm",
+              children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", className: "truncate", children: greaterThanFitlerValue !== void 0 ? greaterThanFitlerValue ?? "empty" : "..." })
+            }
+          );
         }
         case "inRange":
         case "notInRange": {
           const inRangeModifier = condition.modifiers.inRange;
           const rangeFilterValue = conditionValue !== void 0 && inRangeModifier.isConditionValueValid(conditionValue) ? conditionValue : void 0;
           return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Popover.Root, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? "..." }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-                blocks.Input.Field,
-                {
-                  placeholder: "Enter a number",
-                  type: "number",
-                  value: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? "",
-                  onChange: (e) => {
-                    const value = e.target.valueAsNumber;
-                    condition.setConditionValue({
-                      from: !isNaN(value) ? value : null,
-                      to: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? null
-                    });
-                  }
-                }
-              ) }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Popover.Root, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? "..." }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Popover.Content, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { accentColor: "base", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-                blocks.Input.Field,
-                {
-                  placeholder: "Enter a number",
-                  type: "number",
-                  value: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? "",
-                  onChange: (e) => {
-                    const value = e.target.valueAsNumber;
-                    condition.setConditionValue({
-                      from: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? null,
-                      to: !isNaN(value) ? value : null
-                    });
-                  }
-                }
-              ) }) })
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NumberInputPopover,
+              {
+                value: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? null,
+                onValueChange: (value) => {
+                  condition.setConditionValue({
+                    from: value,
+                    to: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? null
+                  });
+                },
+                size: "sm",
+                children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? "..." })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NumberInputPopover,
+              {
+                value: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? null,
+                onValueChange: (value) => {
+                  condition.setConditionValue({
+                    from: (rangeFilterValue == null ? void 0 : rangeFilterValue.from) ?? null,
+                    to: value
+                  });
+                },
+                size: "sm",
+                children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { className: "truncate", children: (rangeFilterValue == null ? void 0 : rangeFilterValue.to) ?? "..." })
+              }
+            )
           ] });
         }
       }
@@ -34709,7 +34823,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     duplicate(identifier) {
       return new _FieldSection({
         ...this.getOptions(),
-        identifier
+        identifier,
+        fields: this.fields.map((field) => field.duplicate(uuid.v4()))
       });
     }
     setOptions(options2) {
@@ -35154,7 +35269,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       const error = get(errors, field2.identifier);
       return error && (typeof error !== "object" || Object.values(error).length > 0);
     });
-    const previewInput = useFieldInput(field, { formId, showInputOnly: false });
     const handleFieldImageClick = React.useCallback(() => {
       if (!resolvedImage) return;
       openImageViewer(() => ({
@@ -35231,15 +35345,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           }
         )
       ] }),
-      directlyShownFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: directlyShownInputs }),
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Separator, { size: "full" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(blocks.HoverCard.Root, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(blocks.HoverCard.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Badge, { icon: true, size: "sm", variant: "soft", accentColor: "base", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "eye" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(blocks.HoverCard.Content, { className: "w-[225px]", size: "sm", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "sm", accentColor: "base", children: "This is a preview of the field as it will be rendered in the form." }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grow h-max min-w-0", children: previewInput })
-      ] })
+      directlyShownFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: directlyShownInputs })
     ] });
   });
   FieldBuilder.displayName = "FieldBuilder";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@overmap-ai/forms",
-	"version": "1.0.32-react-flow-david-fixes.13",
+	"version": "1.0.32-react-flow-david-fixes.14",
 	"license": "UNLICENSED",
 	"main": "dist/forms.umd.cjs",
 	"module": "dist/forms.js",