@overmap-ai/core 1.0.33-revamp-forms-builder.19 → 1.0.33-revamp-forms-builder.21

package/dist/overmap-core.umd.cjs

@@ -6130,9 +6130,9 @@ var __publicField = (obj, key, value) => {
     }
   }
   const emptyBaseField = {
-    label: "",
-    required: false,
-    description: ""
+    label: "Question",
+    description: "Optional description",
+    required: false
   };
   class BaseField extends BaseFormElement {
     constructor(options) {
@@ -6222,7 +6222,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { ...restProps, children });
   };
   const useFormikInput = (props) => {
-    const { id, field, formId: formId2, size, ...rest } = props;
+    const { id, field, formId: formId2, size, showInputOnly, ...rest } = props;
     const [fieldProps, meta, helpers] = formik.useField(field.getId());
     const { touched } = meta;
     const helpText = meta.error ?? field.description;
@@ -6256,6 +6256,7 @@ var __publicField = (obj, key, value) => {
         inputId,
         labelId,
         label,
+        showInputOnly,
         fieldProps: fieldPropsWithValidation,
         helpers,
         field
@@ -6264,8 +6265,11 @@ var __publicField = (obj, key, value) => {
     ];
   };
   const truthyValues = [true, "true"];
-  const BooleanInput = React.memo(function BooleanInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  const BooleanInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const color = blocks.useSeverityColor(severity);
     const value = truthyValues.includes(fieldProps.value);
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6295,6 +6299,7 @@ var __publicField = (obj, key, value) => {
       }
     ) });
   });
+  BooleanInput.displayName = "BooleanInput";
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null)
       return {};
@@ -8146,8 +8151,11 @@ var __publicField = (obj, key, value) => {
     Trigger: TabsTrigger,
     Content: TabsContent
   });
-  const NumberInput$1 = React.memo(function NumberInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const NumberInput$1 = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const color = blocks.useSeverityColor(severity);
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
       TextField$1.Input,
@@ -8156,6 +8164,7 @@ var __publicField = (obj, key, value) => {
         ...fieldProps,
         type: "number",
         id: inputId,
+        placeholder: "Enter a number",
         min: field.minimum,
         max: field.maximum,
         step: field.integers ? 1 : 0.1,
@@ -8163,6 +8172,7 @@ var __publicField = (obj, key, value) => {
       }
     ) }) });
   });
+  NumberInput$1.displayName = "NumberInput";
   const emptyNumberField = {
     ...emptyBaseField,
     type: "number",
@@ -8293,12 +8303,16 @@ var __publicField = (obj, key, value) => {
     return null;
   });
   let NumberField = _NumberField;
-  const DateInput = React.memo(function DateInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  const DateInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const color = blocks.useSeverityColor(severity);
     const value = fieldProps.value ? fieldProps.value.split("T")[0] : "";
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(TextField$1.Input, { ...rest, ...fieldProps, type: "date", id: inputId, color, value }) }) });
   });
+  DateInput.displayName = "DateInput";
   const emptyDateField = {
     ...emptyBaseField,
     type: "date"
@@ -8439,10 +8453,23 @@ var __publicField = (obj, key, value) => {
     clickableLinkContainer,
     TextFieldInputCopy
   };
-  const StringInput = React.memo(function StringInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const StringInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const color = blocks.useSeverityColor(severity);
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsxRuntime.jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxRuntime.jsxs(TextField$1.Root, { className: styles$5.clickableLinkContainer, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      TextField$1.Input,
+      {
+        ...rest,
+        ...fieldProps,
+        type: field.inputType,
+        id: inputId,
+        placeholder: "Enter a short description",
+        color
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(TextField$1.Root, { className: styles$5.clickableLinkContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -8465,6 +8492,7 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rt-TextFieldChrome" })
     ] }) }) });
   });
+  StringInput.displayName = "StringInput";
   const emptyStringField = {
     ...emptyBaseField,
     type: "string",
@@ -8497,10 +8525,24 @@ var __publicField = (obj, key, value) => {
   __publicField(_StringField, "fieldTypeDescription", "Short text fields can hold up to 500 characters on a single line.");
   __publicField(_StringField, "Icon", InputIcon);
   let StringField = _StringField;
-  const TextInput = React.memo(function TextInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
+  const TextInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
+      blocks.TextArea,
+      {
+        ...rest,
+        ...fieldProps,
+        resize: "vertical",
+        id: inputId,
+        placeholder: "Enter a description",
+        severity
+      }
+    ) }) });
   });
+  TextInput.displayName = "TextInput";
   const emptyTextField = {
     ...emptyBaseField,
     type: "text",
@@ -8529,9 +8571,12 @@ var __publicField = (obj, key, value) => {
   __publicField(_TextField, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines.");
   __publicField(_TextField, "Icon", RowsIcon);
   let TextField = _TextField;
-  const SelectInput = React.memo(function SelectInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const SelectInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
     const { onChange, onBlur } = fieldProps;
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const options = React.useMemo(
       () => field.options.map((option) => ({ value: option.value, itemContent: option.label })),
       [field.options]
@@ -8556,6 +8601,7 @@ var __publicField = (obj, key, value) => {
       }
     ) }) });
   });
+  SelectInput.displayName = "SelectInput";
   const emptySection = (id = "", fields = []) => ({
     type: "section",
     fields,
@@ -8720,8 +8766,11 @@ var __publicField = (obj, key, value) => {
     );
     return { reorderSection, reorderField };
   };
-  const MultiStringInput = React.memo(function MultiStringInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  const MultiStringInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const color = blocks.useSeverityColor(severity);
     const value = React.useMemo(
       () => Array.isArray(fieldProps.value) ? fieldProps.value : [],
@@ -8862,6 +8911,7 @@ var __publicField = (obj, key, value) => {
       ] }) })
     ] }) });
   });
+  MultiStringInput.displayName = "MultiStringInput";
   const emptyMultiStringField = {
     ...emptyBaseField,
     type: "multi-string",
@@ -8996,9 +9046,12 @@ var __publicField = (obj, key, value) => {
       return value;
     return [value];
   };
-  const MultiSelectInput = React.memo(function MultiSelectInput2(props) {
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const MultiSelectInput = React.memo((props) => {
+    const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
     const { onChange, onBlur } = fieldProps;
+    let [{ helpText, label }] = useFormikInput(props);
+    helpText = showInputOnly ? null : helpText;
+    label = showInputOnly ? "" : label;
     const value = React.useMemo(() => parseValueToArray(fieldProps.value), [fieldProps.value]);
     const handleChange = React.useCallback(
       (value2) => {
@@ -9021,6 +9074,7 @@ var __publicField = (obj, key, value) => {
       }
     ) }) });
   });
+  MultiSelectInput.displayName = "MultiSelectInput";
   const emptyMultiSelectField = {
     ...emptyBaseField,
     type: "multi-select",
@@ -9112,21 +9166,25 @@ var __publicField = (obj, key, value) => {
     });
     return formatter.format(sizeInUnit);
   };
-  const NumberInput = React.memo(function NumberInput2(props) {
+  const NumberInput = React.memo((props) => {
     var _a2;
-    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
     const { onChange } = fieldProps;
+    let [{ label }] = useFormikInput(props);
+    label = showInputOnly ? "" : label;
     const color = blocks.useSeverityColor(severity);
     const input = React.useRef(null);
     const { value } = fieldProps;
     const updatedHelpText = React.useMemo(() => {
+      if (showInputOnly)
+        return null;
       if (helpText)
         return helpText;
       if (field.maxFileSize) {
         return `Maximum file size: ${field.maxFileSize}MB`;
       }
       return null;
-    }, [field.maxFileSize, helpText]);
+    }, [field.maxFileSize, helpText, showInputOnly]);
     const handleClick = React.useCallback(() => {
       var _a3;
       (_a3 = input.current) == null ? void 0 : _a3.click();
@@ -9145,7 +9203,7 @@ var __publicField = (obj, key, value) => {
     const buttonText = field.maxFiles > 1 ? multipleButtonText : singleButtonText;
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxRuntime.jsxs(InputWithLabel, { size, severity, inputId, labelId, label, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "row", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "max-content", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { ...rest, onClick: handleClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "row", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "max-content", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { ...rest, variant: "soft", onClick: handleClick, children: [
           /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, {}),
           " ",
           buttonText
@@ -9180,7 +9238,9 @@ var __publicField = (obj, key, value) => {
       )) })
     ] });
   });
-  const DisplayFile = React.memo(function DisplayFile2({ file, field, onRemove, disabled }) {
+  NumberInput.displayName = "NumberInput";
+  const DisplayFile = React.memo((props) => {
+    const { file, field, onRemove, disabled } = props;
     const [resolvedFile, setResolvedFile] = React.useState(null);
     const error2 = React.useMemo(() => resolvedFile && field.getError([resolvedFile]), [field, resolvedFile]);
     const { url, name, size } = React.useMemo(() => {
@@ -9228,6 +9288,7 @@ var __publicField = (obj, key, value) => {
       url && /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$4.previewImage, src: url, alt: name })
     ] }) });
   });
+  DisplayFile.displayName = "DisplayFile";
   const emptyUploadField = {
     ...emptyBaseField,
     type: "upload",
@@ -10210,13 +10271,15 @@ var __publicField = (obj, key, value) => {
     ] });
   });
   FieldActions.displayName = "FieldActions";
-  const popoverInputsContainer = "_popoverInputsContainer_1s3np_1";
-  const typeBadge = "_typeBadge_1s3np_5";
-  const description = "_description_1s3np_10";
+  const popoverInputsContainer = "_popoverInputsContainer_18pn8_1";
+  const typeBadge = "_typeBadge_18pn8_5";
+  const description = "_description_18pn8_10";
+  const previewInput = "_previewInput_18pn8_14";
   const styles = {
     popoverInputsContainer,
     typeBadge,
-    description
+    description,
+    previewInput
   };
   const FieldSettingsPopover = React.memo((props) => {
     const { popoverInputs, hasError } = props;
@@ -10341,8 +10404,10 @@ var __publicField = (obj, key, value) => {
       const error2 = get(errors, fieldCls === FieldSection ? `${parentPath}.${index2}.condition` : field.getId());
       return error2 && (typeof error2 !== "object" || hasKeys(error2));
     });
+    const deserializedField = React.useMemo(() => deserialize(initial), [initial]);
+    const previewInput2 = useFieldInput(deserializedField, { formId, disabled: true, showInputOnly: true });
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", grow: "1", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", grow: "1", children: [
         fieldCls === FieldSection && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "1", children: [
           directlyShownFields.length > 0 && directlyShownInputs,
           /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", gap: "2", children: [
@@ -10398,6 +10463,7 @@ var __publicField = (obj, key, value) => {
             )
           }
         ),
+        fieldCls !== FieldSection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.previewInput, children: previewInput2 }),
         /* @__PURE__ */ jsxRuntime.jsx(
           PatchField,
           {
@@ -10792,7 +10858,7 @@ var __publicField = (obj, key, value) => {
             /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "4", children: field.label }),
             /* @__PURE__ */ jsxRuntime.jsx(blocks.Badge, { className: styles$1.typeBadge, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Text, { children: [
               field.fields.length,
-              " Fields"
+              " fields"
             ] }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "row", gap: "2", children: field.fields.map((child) => {