@dxos/react-ui-form 0.7.1 → 0.7.2-staging.6d26b2a

package/dist/lib/node/index.cjs

@@ -32,8 +32,8 @@ __export(node_exports, {
   DeprecatedFormInput: () => DeprecatedFormInput,
   FieldEditor: () => FieldEditor,
   Form: () => Form,
+  GeiPointInput: () => GeiPointInput,
   InputHeader: () => InputHeader,
-  LatLngInput: () => LatLngInput,
   NumberInput: () => NumberInput,
   SelectInput: () => SelectInput,
   TextInput: () => TextInput,
@@ -55,20 +55,22 @@ var import_echo_schema = require("@dxos/echo-schema");
 var import_log = require("@dxos/log");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_schema = require("@dxos/schema");
+var import_effect = require("effect");
+var import_String = require("effect/String");
 var import_react3 = __toESM(require("react"));
 var import_echo_schema2 = require("@dxos/echo-schema");
-var import_effect = require("@dxos/effect");
+var import_effect2 = require("@dxos/effect");
 var import_log2 = require("@dxos/log");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_schema2 = require("@dxos/schema");
 var import_util = require("@dxos/util");
-var import_echo_schema3 = require("@dxos/echo-schema");
 var import_react4 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react5 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_echo_schema3 = require("@dxos/echo-schema");
 var import_react6 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
 var import_react7 = require("react");
@@ -173,52 +175,13 @@ var InputHeader = ({ children, error }) => {
     side: "bottom"
   }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Arrow, null), error)));
 };
-var LatLngInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
-  const { lat = 0, lng = 0 } = getValue(property) ?? {};
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
   }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: lat,
-    onChange: (event) => onValueChange(property, type, {
-      lat: safeParseFloat(event.target.value, 0),
-      lng
-    }),
-    onBlur
-  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder longitude"),
-    value: lng,
-    onChange: (event) => onValueChange(property, type, {
-      lat,
-      lng: safeParseFloat(event.target.value, 0)
-    }),
-    onBlur
-  })));
-};
-var safeParseFloat = (str, defaultValue) => {
-  try {
-    return parseFloat(str);
-  } catch {
-    return defaultValue ?? 0;
-  }
-};
-var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
-  const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     disabled,
     placeholder,
     value: getValue(property) ?? "",
@@ -228,11 +191,11 @@ var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getV
 };
 var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     type: "number",
     disabled,
     placeholder,
@@ -243,40 +206,79 @@ var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, ge
 };
 var BooleanInput = ({ property, type, label, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Switch, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Switch, {
     checked: getValue(property),
     onCheckedChange: (value) => onValueChange(property, type, value)
   }));
 };
 var SelectInput = ({ property, type, label, disabled, placeholder, options, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Root, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Root, {
     value: getValue(property),
     onValueChange: (value) => onValueChange(property, type, value)
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.TriggerButton, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Portal, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Option, {
+    /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
   )))))));
 };
+var GeiPointInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = (0, import_react_ui6.useTranslation)(translationKey);
+  const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue(property) ?? [];
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: lng,
+    onChange: (event) => onValueChange(property, type, [
+      lat,
+      safeParseFloat(event.target.value, 0)
+    ]),
+    onBlur
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: lat,
+    onChange: (event) => onValueChange(property, type, [
+      safeParseFloat(event.target.value, 0),
+      lng
+    ]),
+    onBlur
+  })));
+};
+var safeParseFloat = (str, defaultValue) => {
+  try {
+    return parseFloat(str);
+  } catch {
+    return defaultValue ?? 0;
+  }
+};
 var getInputComponent = (type, format) => {
   switch (format) {
     case import_echo_schema3.FormatEnum.LatLng:
-      return LatLngInput;
+      return GeiPointInput;
   }
   switch (type) {
     case "string":
@@ -357,7 +359,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       import_log3.log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 164,
+        L: 165,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -412,7 +414,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   (0, import_invariant.invariant)(obj, void 0, {
     F: __dxlog_file,
-    L: 215,
+    L: 216,
     S: void 0,
     A: [
       "obj",
@@ -448,11 +450,11 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     onValid,
     onSubmit
   });
-  const props = (0, import_react3.useMemo)(() => {
-    const props2 = (0, import_schema2.getSchemaProperties)(schema.ast, values);
-    const filtered = filter ? filter(props2) : props2;
-    const findIndex = (props3, prop) => {
-      const idx = props3.findIndex((p) => p === prop);
+  const properties = (0, import_react3.useMemo)(() => {
+    const props = (0, import_schema2.getSchemaProperties)(schema.ast, values);
+    const filtered = filter ? filter(props) : props;
+    const findIndex = (props2, prop) => {
+      const idx = props2.findIndex((p) => p === prop);
       return idx === -1 ? Infinity : idx;
     };
     return sort ? filtered.sort(({ name: a }, { name: b }) => findIndex(sort, a) - findIndex(sort, b)) : filtered;
@@ -467,7 +469,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         errors
       }, {
         F: __dxlog_file2,
-        L: 93,
+        L: 96,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -478,16 +480,41 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "form",
     className: (0, import_react_ui_theme.mx)("flex flex-col w-full gap-2 py-2", classNames)
-  }, props.map(({ prop, name, type, format, title, description, examples }) => {
+  }, properties.map((property) => {
+    const { ast, name, type, format, title, description, examples, options } = property;
     const key = [
       ...path,
       name
     ];
-    const InputComponent = Custom?.[key.join(".")] ?? getInputComponent(type, format);
+    const label = (0, import_effect.pipe)(title ?? name, import_String.capitalize);
+    const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+    let InputComponent = Custom?.[key.join(".")];
+    if (!InputComponent) {
+      if (options) {
+        return /* @__PURE__ */ import_react3.default.createElement("div", {
+          key: name,
+          role: "none",
+          className: padding
+        }, /* @__PURE__ */ import_react3.default.createElement(SelectInput, {
+          type,
+          format,
+          property: name,
+          disabled: readonly,
+          label,
+          options: options.map((option) => ({
+            value: option,
+            label: String(option)
+          })),
+          placeholder,
+          ...inputProps
+        }));
+      }
+      InputComponent = getInputComponent(type, format);
+    }
     if (!InputComponent) {
       if (type === "object") {
-        const baseNode = (0, import_effect.findNode)(prop.type, import_effect.isDiscriminatedUnion);
-        const typeLiteral = baseNode ? (0, import_effect.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect.findNode)(prop.type, import_echo_schema2.AST.isTypeLiteral);
+        const baseNode = (0, import_effect2.findNode)(ast, import_effect2.isDiscriminatedUnion);
+        const typeLiteral = baseNode ? (0, import_effect2.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect2.findNode)(ast, import_echo_schema2.AST.isTypeLiteral);
         if (typeLiteral) {
           const schema2 = import_echo_schema2.S.make(typeLiteral);
           return /* @__PURE__ */ import_react3.default.createElement("div", {
@@ -495,7 +522,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
             role: "none"
           }, /* @__PURE__ */ import_react3.default.createElement("div", {
             className: padding
-          }, title ?? name), /* @__PURE__ */ import_react3.default.createElement(Form, {
+          }, label), /* @__PURE__ */ import_react3.default.createElement(Form, {
             schema: schema2,
             path: key,
             values: values[name] ?? {},
@@ -511,13 +538,12 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         type
       }, {
         F: __dxlog_file2,
-        L: 132,
+        L: 160,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return null;
     }
-    const placeholder = examples?.length ? `Example: ${examples[0]}` : description;
     return /* @__PURE__ */ import_react3.default.createElement("div", {
       key: name,
       role: "none",
@@ -527,7 +553,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       format,
       property: name,
       disabled: readonly,
-      label: title ?? name,
+      label,
       placeholder,
       ...inputProps
     }));
@@ -1010,8 +1036,8 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  GeiPointInput,
   InputHeader,
-  LatLngInput,
   NumberInput,
   SelectInput,
   TextInput,