@dxos/react-ui-form 0.7.5-main.b19bfc8 → 0.7.5-main.d9d2d4e

package/dist/lib/browser/index.mjs

@@ -99,14 +99,14 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React12, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo6, useState as useState4 } from "react";
+import React12, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useState as useState4 } from "react";
 import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
 import { log as log2 } from "@dxos/log";
 import { useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
 
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-import React2, { createContext, useContext, useEffect as useEffect2 } from "react";
+import React2, { createContext, useContext, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { raise } from "@dxos/debug";
 import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -170,7 +170,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   }, [
     errors
   ]);
-  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors
+  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors.
   !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
     touched,
     errors,
@@ -203,10 +203,12 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   }, [
     errors
   ]);
-  const getFormValue = (path) => {
+  const getFormValue = useCallback((path) => {
     return getValue(values, createJsonPath(path));
-  };
-  const onValueChange = (path, type, value) => {
+  }, [
+    values
+  ]);
+  const onValueChange = useCallback((path, type, value) => {
     const jsonPath = createJsonPath(path);
     let parsedValue = value;
     try {
@@ -216,7 +218,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 198,
+        L: 202,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -237,7 +239,13 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
         changed
       });
     }
-  };
+  }, [
+    values,
+    onValuesChanged,
+    validate,
+    onValid,
+    changed
+  ]);
   const onTouched = useCallback((path) => {
     const jsonPath = createJsonPath(path);
     setTouched((touched2) => ({
@@ -249,26 +257,39 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     validate,
     values
   ]);
-  return {
+  return useMemo(() => ({
     // State.
     values,
     errors,
     touched,
     changed,
     canSave,
-    handleSave,
     formIsValid,
+    // Actions.
+    handleSave,
     // Field utils.
     getStatus,
     getValue: getFormValue,
     onValueChange,
     onTouched
-  };
+  }), [
+    values,
+    errors,
+    touched,
+    changed,
+    canSave,
+    formIsValid,
+    handleSave,
+    getStatus,
+    getFormValue,
+    onValueChange,
+    onTouched
+  ]);
 };
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 241,
+    L: 264,
     S: void 0,
     A: [
       "obj",
@@ -302,12 +323,21 @@ var useFormValues = (path = []) => {
 };
 var useInputProps = (path = []) => {
   const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type, value) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path)
-  };
+  const stablePath = useMemo2(() => path, [
+    Array.isArray(path) ? path.join(".") : path
+  ]);
+  return useMemo2(() => ({
+    getStatus: () => getStatus(stablePath),
+    getValue: () => getFormValue(stablePath),
+    onValueChange: (type, value) => onValueChange(stablePath, type, value),
+    onBlur: () => onTouched(stablePath)
+  }), [
+    getStatus,
+    getFormValue,
+    onValueChange,
+    onTouched,
+    stablePath
+  ]);
 };
 var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
   const form = useForm(formOptions);
@@ -347,7 +377,7 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-import React4, { useCallback as useCallback2, useState as useState2, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import React4, { useCallback as useCallback2, useState as useState2, useEffect as useEffect3, useMemo as useMemo3 } from "react";
 import { GeoLocation } from "@dxos/echo-schema";
 import { Input as Input2, useTranslation } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
@@ -375,13 +405,13 @@ var InputHeader = ({ children, error }) => {
 var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
-  const geoPoint = useMemo2(() => getValue3() ?? [
+  const geoPoint = useMemo3(() => getValue3() ?? [
     0,
     0
   ], [
     getValue3
   ]);
-  const geoLocation = useMemo2(() => GeoLocation.fromGeoPoint(geoPoint), [
+  const geoLocation = useMemo3(() => GeoLocation.fromGeoPoint(geoPoint), [
     geoPoint
   ]);
   const [longitudeText, setLongitudeText] = useState2(geoLocation.longitude?.toString());
@@ -764,7 +794,7 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React11, { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef3 } from "react";
+import React11, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3 } from "react";
 import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
@@ -798,7 +828,7 @@ var FormActions = ({ onCancel, readonly }) => {
 // packages/ui/react-ui-form/src/components/Form/FormContent.tsx
 import { pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
-import React10, { useMemo as useMemo4 } from "react";
+import React10, { useMemo as useMemo5 } from "react";
 import { AST as AST3, S } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath3, findNode as findNode2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
 import { mx as mx6 } from "@dxos/react-ui-theme";
@@ -808,7 +838,7 @@ import { isNotFalsy } from "@dxos/util";
 // packages/ui/react-ui-form/src/components/Form/ArrayField.tsx
 import { pipe } from "effect";
 import { capitalize } from "effect/String";
-import React9, { useCallback as useCallback5, useMemo as useMemo3 } from "react";
+import React9, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
 import { AST as AST2 } from "@dxos/echo-schema";
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
 import { invariant as invariant2 } from "@dxos/invariant";
@@ -844,7 +874,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       prop.defaultValue
     ]));
   };
-  const newValue = useMemo3(() => {
+  const newValue = useMemo4(() => {
     if (type === "object" && elementType) {
       return getDefaultObjectValue(elementType);
     } else {
@@ -943,11 +973,11 @@ var getInputComponent = (type, format) => {
 var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = useMemo4(() => title ?? pipe2(name, capitalize2), [
+  const label = useMemo5(() => title ?? pipe2(name, capitalize2), [
     title,
     name
   ]);
-  const placeholder = useMemo4(() => examples?.length ? `Example: "${examples[0]}"` : description, [
+  const placeholder = useMemo5(() => examples?.length ? `Example: "${examples[0]}"` : description, [
     examples,
     description
   ]);
@@ -1039,7 +1069,7 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
 };
 var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
   const values = useFormValues(path);
-  const properties = useMemo4(() => {
+  const properties = useMemo5(() => {
     const props = getSchemaProperties2(schema.ast, values);
     const filtered = filter ? filter(props) : props;
     return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
@@ -1070,7 +1100,7 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
 var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
   const formRef = useRef3(null);
-  const onValid = useMemo5(() => autoSave ? onSave : void 0, [
+  const onValid = useMemo6(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
@@ -1215,7 +1245,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     onSave
   ]);
-  const Custom = useMemo6(() => ({
+  const Custom = useMemo7(() => ({
     ["format"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
@@ -1272,7 +1302,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React13, { useCallback as useCallback7, useMemo as useMemo7, useState as useState5 } from "react";
+import React13, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
 import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
 import { IconButton as IconButton4, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
@@ -1289,17 +1319,17 @@ var ViewMetaSchema = S2.Struct({
 }).pipe(S2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = useTranslation6(translationKey);
-  const projection = useMemo7(() => new ViewProjection(schema, view), [
+  const projection = useMemo8(() => new ViewProjection(schema, view), [
     schema,
     view
   ]);
   const [field, setField] = useState5();
-  const viewValues = useMemo7(() => {
+  const viewValues = useMemo8(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
-      typename: view.query.type
+      typename: view.query.typename
     };
   }, [
     view
@@ -1309,7 +1339,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       if (view.name !== name) {
         view.name = name;
       }
-      if (view.query.type !== typename) {
+      if (view.query.typename !== typename) {
         onTypenameChanged(typename);
       }
     });