@overmap-ai/forms 1.0.12 → 1.0.13

package/dist/forms.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("formik"), require("react"), require("@radix-ui/react-icons"), require("@radix-ui/themes"), require("@hello-pangea/dnd"), require("@overmap-ai/core"), require("lodash.get"), require("lodash.set"), require("lodash.clonedeep")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@overmap-ai/blocks", "formik", "react", "@radix-ui/react-icons", "@radix-ui/themes", "@hello-pangea/dnd", "@overmap-ai/core", "lodash.get", "lodash.set", "lodash.clonedeep"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.forms = {}, global.jsxRuntime, global.blocks, global.formik, global.React, global.reactIcons, global.themes, global.dnd, global.core, global.get, global.set, global.cloneDeep));
-})(this, function(exports2, jsxRuntime, blocks, formik, React, reactIcons, themes, dnd, core, get, set, cloneDeep) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("formik"), require("react"), require("@radix-ui/react-icons"), require("@radix-ui/themes"), require("linkify-react"), require("@overmap-ai/core"), require("@hello-pangea/dnd"), require("lodash.get"), require("lodash.set"), require("lodash.clonedeep")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@overmap-ai/blocks", "formik", "react", "@radix-ui/react-icons", "@radix-ui/themes", "linkify-react", "@overmap-ai/core", "@hello-pangea/dnd", "lodash.get", "lodash.set", "lodash.clonedeep"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.forms = {}, global.jsxRuntime, global.blocks, global.formik, global.React, global.reactIcons, global.themes, global.Linkify, global.core, global.dnd, global.get, global.set, global.cloneDeep));
+})(this, function(exports2, jsxRuntime, blocks, formik, React, reactIcons, themes, Linkify, core, dnd, get, set, cloneDeep) {
   "use strict";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) => {
@@ -99,7 +99,7 @@ var __publicField = (obj, key, value) => {
   __publicField(BaseField, "fieldTypeName");
   __publicField(BaseField, "fieldTypeDescription");
   const description$1 = "_description_17zed_1";
-  const styles$3 = {
+  const styles$4 = {
     description: description$1
   };
   const InputWithLabel = (props) => {
@@ -113,7 +113,7 @@ var __publicField = (obj, key, value) => {
     const { helpText, children, severity } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "1", children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", severity, className: styles$3.description, children: helpText }) })
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", severity, className: styles$4.description, children: helpText }) })
     ] });
   };
   const useFormikInput = (props) => {
@@ -465,10 +465,37 @@ var __publicField = (obj, key, value) => {
     }
     return null;
   });
+  const clickableLinkContainer = "_clickableLinkContainer_1ace7_1";
+  const TextFieldInputCopy = "_TextFieldInputCopy_1ace7_5";
+  const styles$3 = {
+    clickableLinkContainer,
+    TextFieldInputCopy
+  };
   const StringInput = React.memo(function StringInput2(props) {
     const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
     const color = blocks.useSeverityColor(severity);
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxRuntime.jsxs(themes.TextField.Root, { className: styles$3.clickableLinkContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: core.classNames(
+            "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
+            styles$3.TextFieldInputCopy
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Linkify,
+            {
+              options: {
+                target: "_blank",
+                rel: "noopener"
+              },
+              children: fieldProps.value
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rt-TextFieldChrome" })
+    ] }) }) });
   });
   const _StringField = class _StringField extends StringOrTextField {
     constructor(options) {
@@ -1004,7 +1031,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(themes.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
         /* @__PURE__ */ jsxRuntime.jsx(themes.Heading, { as: "h3", size: "3", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$3.description, children: description2 })
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$4.description, children: description2 })
       ] }),
       inputs
     ] }) });
@@ -1527,7 +1554,7 @@ var __publicField = (obj, key, value) => {
         [schema.title]
       );
       const Description = React.useMemo(
-        () => typeof schema.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$3.description, children: schema.description }) : schema.description,
+        () => typeof schema.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$4.description, children: schema.description }) : schema.description,
         [schema.description]
       );
       const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
@@ -2146,7 +2173,6 @@ var __publicField = (obj, key, value) => {
         blocks.DropdownItemMenu,
         {
           trigger: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DotsVerticalIcon, {}) }),
-          closeOnSelect: false,
           items: actions.map((Action) => {
             var _a;
             if (Action.disableOnMobile)
@@ -2392,7 +2418,7 @@ var __publicField = (obj, key, value) => {
           /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", grow: "1", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
               /* @__PURE__ */ jsxRuntime.jsx(themes.Heading, { as: "h3", size: "3", children: field.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$3.description, children: field.description })
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$4.description, children: field.description })
             ] }),
             field.condition && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Em, { children: [
               "Display only if ",