@overmap-ai/forms 1.0.12 → 1.0.13

package/dist/forms.js

@@ -10,8 +10,9 @@ import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
 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 Linkify from "linkify-react";
+import { classNames, slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import { slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, classNames, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
 import get from "lodash.get";
 import set from "lodash.set";
 import cloneDeep from "lodash.clonedeep";
@@ -106,7 +107,7 @@ class BaseField extends BaseFormElement {
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
 const description$1 = "_description_17zed_1";
-const styles$3 = {
+const styles$4 = {
   description: description$1
 };
 const InputWithLabel = (props) => {
@@ -120,7 +121,7 @@ const InputWithLabelAndHelpText = (props) => {
   const { helpText, children, severity } = props;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
     children,
-    /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { size: "1", severity, className: styles$3.description, children: helpText }) })
+    /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { size: "1", severity, className: styles$4.description, children: helpText }) })
   ] });
 };
 const useFormikInput = (props) => {
@@ -472,10 +473,37 @@ __publicField(StringOrTextField, "_validateMax", (value, allValues) => {
   }
   return null;
 });
+const clickableLinkContainer = "_clickableLinkContainer_1ace7_1";
+const TextFieldInputCopy = "_TextFieldInputCopy_1ace7_5";
+const styles$3 = {
+  clickableLinkContainer,
+  TextFieldInputCopy
+};
 const StringInput = memo(function StringInput2(props) {
   const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
   const color = useSeverityColor(severity);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) }) });
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$3.clickableLinkContainer, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
+          styles$3.TextFieldInputCopy
+        ),
+        children: /* @__PURE__ */ jsx(
+          Linkify,
+          {
+            options: {
+              target: "_blank",
+              rel: "noopener"
+            },
+            children: fieldProps.value
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rt-TextFieldChrome" })
+  ] }) }) });
 });
 const _StringField = class _StringField extends StringOrTextField {
   constructor(options) {
@@ -1011,7 +1039,7 @@ const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
       /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
-      /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: description2 })
+      /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: description2 })
     ] }),
     inputs
   ] }) });
@@ -1534,7 +1562,7 @@ const FormRenderer = memo(
       [schema.title]
     );
     const Description = useMemo(
-      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: schema.description }) : schema.description,
+      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: schema.description }) : schema.description,
       [schema.description]
     );
     const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
@@ -2153,7 +2181,6 @@ const FieldActions = memo(function FieldActions2(props) {
       DropdownItemMenu,
       {
         trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
-        closeOnSelect: false,
         items: actions.map((Action) => {
           var _a;
           if (Action.disableOnMobile)
@@ -2399,7 +2426,7 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
           /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
             /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
-            /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
+            /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: field.description })
           ] }),
           field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
             "Display only if ",