@dxos/react-ui-form 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.5-labs.e27f9b9",
+  "version": "0.7.5-labs.f400bbc",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -28,21 +29,21 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.5-labs.e27f9b9",
-    "@dxos/echo-db": "0.7.5-labs.e27f9b9",
-    "@dxos/debug": "0.7.5-labs.e27f9b9",
-    "@dxos/invariant": "0.7.5-labs.e27f9b9",
-    "@dxos/effect": "0.7.5-labs.e27f9b9",
-    "@dxos/keys": "0.7.5-labs.e27f9b9",
-    "@dxos/echo-schema": "0.7.5-labs.e27f9b9",
-    "@dxos/live-object": "0.7.5-labs.e27f9b9",
-    "@dxos/log": "0.7.5-labs.e27f9b9",
-    "@dxos/react-client": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-list": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-types": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-pickers": "0.7.5-labs.e27f9b9",
-    "@dxos/schema": "0.7.5-labs.e27f9b9",
-    "@dxos/util": "0.7.5-labs.e27f9b9"
+    "@dxos/async": "0.7.5-labs.f400bbc",
+    "@dxos/debug": "0.7.5-labs.f400bbc",
+    "@dxos/echo-db": "0.7.5-labs.f400bbc",
+    "@dxos/echo-schema": "0.7.5-labs.f400bbc",
+    "@dxos/effect": "0.7.5-labs.f400bbc",
+    "@dxos/invariant": "0.7.5-labs.f400bbc",
+    "@dxos/keys": "0.7.5-labs.f400bbc",
+    "@dxos/live-object": "0.7.5-labs.f400bbc",
+    "@dxos/log": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-pickers": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-list": "0.7.5-labs.f400bbc",
+    "@dxos/react-client": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-types": "0.7.5-labs.f400bbc",
+    "@dxos/schema": "0.7.5-labs.f400bbc",
+    "@dxos/util": "0.7.5-labs.f400bbc"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -54,12 +55,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.5-labs.e27f9b9",
-    "@dxos/random": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-theme": "0.7.5-labs.e27f9b9",
-    "@dxos/storybook-utils": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.e27f9b9"
+    "@dxos/echo-signals": "0.7.5-labs.f400bbc",
+    "@dxos/random": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.f400bbc",
+    "@dxos/storybook-utils": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-theme": "0.7.5-labs.f400bbc"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -67,8 +68,8 @@
     "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-theme": "0.7.5-labs.e27f9b9"
+    "@dxos/react-ui": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-theme": "0.7.5-labs.f400bbc"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Defaults.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { Input, Select } from '@dxos/react-ui';
 
@@ -75,9 +75,8 @@ export const NumberInput = ({
 
 export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange }: InputProps) => {
   const { status, error } = getStatus();
+  const checked = Boolean(getValue());
 
-  // TODO(burdon): Runtime error:
-  //  Warning: Unknown event handler property `onCheckedChange`. It will be ignored.
   return (
     <Input.Root validationValence={status}>
       {!inputOnly && (
@@ -85,7 +84,7 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.Switch checked={getValue()} onCheckedChange={(value) => onValueChange(type, value)} />
+      <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
@@ -135,3 +134,61 @@ export const SelectInput = ({
     </Input.Root>
   );
 };
+
+export const MarkdownInput = ({
+  type,
+  label,
+  inputOnly,
+  disabled,
+  placeholder,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // TODO(ZaymonFC): If we start using `Enter` for form submission, we should prevent default behavior here
+  //  since we're using a textarea element and the user needs to be able to enter new lines.
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = 'auto'; // For measurement.
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+
+  // Adjust height on initial render.
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+
+  // Adjust height when the content changes.
+  useEffect(() => {
+    adjustHeight();
+  }, [getValue(), adjustHeight]);
+
+  return (
+    <Input.Root validationValence={status}>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
+      <Input.TextArea
+        ref={textareaRef}
+        disabled={disabled}
+        placeholder={placeholder}
+        value={getValue() ?? ''}
+        classNames={'min-bs-auto max-h-40 overflow-auto'}
+        onChange={(event) => onValueChange(type, event.target.value)}
+        onBlur={onBlur}
+        style={{ resize: 'none' }}
+        spellCheck={false}
+      />
+      {inputOnly && <Input.Validation>{error}</Input.Validation>}
+    </Input.Root>
+  );
+};

package/src/components/Form/Form.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ReactElement, useEffect, useMemo } from 'react';
+import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
 
 import { type BaseObject, type S, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -68,12 +68,13 @@ export const Form = <T extends BaseObject>({
   lookupComponent,
   Custom,
 }: FormProps<T>) => {
+  const formRef = useRef<HTMLDivElement>(null);
   const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
 
-  // TODO(burdon): Hack to select first input.
+  // Focus the first input element within this form.
   useEffect(() => {
-    if (autoFocus) {
-      const input = document.querySelector('input');
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector('input');
       if (input) {
         input.focus();
       }
@@ -82,14 +83,17 @@ export const Form = <T extends BaseObject>({
 
   return (
     <FormProvider
+      formRef={formRef}
       schema={schema}
+      autoSave={autoSave}
       initialValues={initialValues}
       onValuesChanged={onValuesChanged}
       onValidate={onValidate}
       onValid={onValid}
       onSave={onSave}
     >
-      <div role='none' className={mx('p-2', classNames)} data-testid={testId}>
+      {/* TODO(burdon): Remove padding. */}
+      <div ref={formRef} role='none' className={mx('p-2', classNames)} data-testid={testId}>
         <FormFields
           schema={schema}
           path={path}

package/src/components/Form/FormActions.tsx

@@ -20,7 +20,7 @@ export const FormActions = ({ onCancel, readonly }: FormActionsProps) => {
   const { canSave, handleSave } = useFormContext();
 
   return (
-    <div role='none' className='flex justify-center'>
+    <div role='none' className='mt-2 flex justify-center'>
       <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
         {onCancel && !readonly && (
           <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />

package/src/components/Form/FormContent.tsx

@@ -70,18 +70,15 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
     return (
-      // TODO(ZaymonFC): We should try to remove this div wrapper.
-      <div role='none'>
-        <CustomComponent
-          type={type}
-          format={format}
-          label={label}
-          inputOnly={inline}
-          placeholder={placeholder}
-          disabled={readonly}
-          {...inputProps}
-        />
-      </div>
+      <CustomComponent
+        type={type}
+        format={format}
+        label={label}
+        inputOnly={inline}
+        placeholder={placeholder}
+        disabled={readonly}
+        {...inputProps}
+      />
     );
   }
 
@@ -153,7 +150,7 @@ export const FormFields = ({ schema, path, filter, sort, readonly, lookupCompone
   }, [schema, values, filter, sort]);
 
   return (
-    <div role='form' className={mx('flex flex-col w-full gap-2 py-2')}>
+    <div role='form' className={mx('flex flex-col w-full gap-2')}>
       {properties
         .map((property) => {
           return (

package/src/components/Form/FormContext.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { createContext, useContext, type FocusEvent, type PropsWithChildren } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, type FocusEvent, type PropsWithChildren } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -34,15 +34,63 @@ export type FormInputStateProps = {
 export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
   const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
 
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type: SimpleType, value: any) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path),
-  };
+  const stablePath = useMemo(() => path, [Array.isArray(path) ? path.join('.') : path]);
+  return useMemo(
+    () => ({
+      getStatus: () => getStatus(stablePath),
+      getValue: () => getFormValue(stablePath),
+      onValueChange: (type: SimpleType, value: any) => onValueChange(stablePath, type, value),
+      onBlur: () => onTouched(stablePath),
+    }),
+    [getStatus, getFormValue, onValueChange, onTouched, stablePath],
+  );
 };
 
-export const FormProvider = ({ children, ...formOptions }: PropsWithChildren<FormOptions<any>>) => {
-  const formHandler = useForm(formOptions);
-  return <FormContext.Provider value={formHandler}>{children}</FormContext.Provider>;
+export const FormProvider = ({
+  children,
+  formRef,
+  autoSave,
+  ...formOptions
+}: PropsWithChildren<
+  FormOptions<any> & {
+    formRef?: React.RefObject<HTMLDivElement>;
+    autoSave?: boolean;
+  }
+>) => {
+  const form = useForm(formOptions);
+
+  useEffect(() => {
+    if (!formRef?.current) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const keyIsEnter = event.key === 'Enter';
+      const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+      const inputIsTextarea = (event.target as HTMLElement).tagName.toLowerCase() === 'textarea';
+      const inputOptOut = (event.target as HTMLElement).hasAttribute('data-no-submit');
+
+      // Regular inputs: Submit on Enter (no modifiers).
+      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
+
+      // Textareas: Submit only on Meta+Enter.
+      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
+
+      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
+        if (!autoSave && form.canSave) {
+          form.handleSave();
+        }
+        if (autoSave && form.formIsValid) {
+          (event.target as HTMLElement).blur();
+        }
+      }
+    };
+
+    const formElement = formRef.current;
+
+    formElement.addEventListener('keydown', handleKeyDown);
+    return () => formElement.removeEventListener('keydown', handleKeyDown);
+  }, [formRef, form.canSave, form.formIsValid, form.handleSave, autoSave]);
+
+  return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
 };

package/src/components/Form/custom/GeoPointInput.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 
-import { type GeoPoint } from '@dxos/echo-schema';
+import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
@@ -14,28 +14,58 @@ import { InputHeader, type InputProps } from '../Input';
 export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue<GeoPoint>() ?? [];
+  const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
+  const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
+
+  const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
+
+  useEffect(() => {
+    const location = GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude.toString());
+    setLatitudeText(location.latitude.toString());
+  }, [geoPoint]);
+
+  const handleCoordinateChange = useCallback(
+    (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const inputText = event.target.value;
+        setText(inputText);
+        if (inputText !== '' && inputText !== '-') {
+          const coord = safeParseFloat(inputText);
+          if (coord !== undefined && !isNaN(coord)) {
+            const currentLocation = GeoLocation.fromGeoPoint(getValue<GeoPoint>() ?? [0, 0]);
+            const newLocation = { ...currentLocation, [coordinateType]: coord };
+            const newValue = GeoLocation.toGeoPoint(newLocation);
+            onValueChange(type, newValue);
+          }
+        }
+      },
+    [getValue, onValueChange, type],
+  );
 
   return (
     <Input.Root validationValence={status}>
       <InputHeader error={error}>
         <Input.Label>{label}</Input.Label>
       </InputHeader>
-      <div className='grid grid-cols-2 gap-2'>
+      <div role='none' className='grid grid-cols-2 gap-2'>
         <Input.TextInput
-          type='number'
+          type='text'
+          pattern='^-?[0-9]*\.?[0-9]*$'
           disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={lng}
-          onChange={(event) => onValueChange(type, [lat, safeParseFloat(event.target.value, 0)])}
+          placeholder={t('placeholder latitude')}
+          value={latitudeText}
+          onChange={handleCoordinateChange('latitude', setLatitudeText)}
           onBlur={onBlur}
         />
         <Input.TextInput
-          type='number'
+          type='text'
+          pattern='^-?[0-9]*\.?[0-9]*$'
           disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={lat}
-          onChange={(event) => onValueChange(type, [safeParseFloat(event.target.value, 0), lng])}
+          placeholder={t('placeholder longitude')}
+          value={longitudeText}
+          onChange={handleCoordinateChange('longitude', setLongitudeText)}
           onBlur={onBlur}
         />
       </div>

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -8,8 +8,8 @@ import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
-import { HuePickerToolbarButton } from '@dxos/react-ui-pickers';
-import { hueTokenThemes, mx } from '@dxos/react-ui-theme';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { hues, mx } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
@@ -32,20 +32,17 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
 
   const randomHue = () => {
     const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const hueKeys = Object.keys(hueTokenThemes) as Array<keyof typeof hueTokenThemes>;
-
     // Pick a random unused option from hueTokenThemes.
-    const unusedHues = hueKeys.filter((hue) => !usedHues.has(hue));
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
     if (unusedHues.length > 0) {
       return unusedHues[Math.floor(Math.random() * unusedHues.length)];
     }
 
     // Pick a random one that hasn't been used in the last three options
     const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = hueKeys.filter((hue) => !lastThree.has(hue));
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
     return (
-      availableHues[Math.floor(Math.random() * availableHues.length)] ??
-      hueKeys[Math.floor(Math.random() * hueKeys.length)]
+      availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)]
     );
   };
 
@@ -154,9 +151,10 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               onChange={handleTitleChange(item.id)}
                               onKeyDown={handleKeyDown}
                               classNames='flex-1'
+                              data-no-submit
                             />
                             <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePickerToolbarButton hue={item.color} onChangeHue={handleColorChange(item.id)} />
+                              <HuePicker value={item.color} onChange={handleColorChange(item.id)} />
                             </Toolbar.Root>
                             <IconButton
                               icon='ph--trash--fill'

package/src/components/Form/factory.tsx

@@ -5,7 +5,7 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
-import { BooleanInput, NumberInput, TextInput } from './Defaults';
+import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
 import { GeoPointInput } from './custom';
 
@@ -14,8 +14,10 @@ import { GeoPointInput } from './custom';
  */
 export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
   switch (format) {
-    case FormatEnum.LatLng:
+    case FormatEnum.GeoPoint:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
 
   switch (type) {

package/src/components/Form/index.ts

@@ -2,8 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFormValues } from './FormContext';
+
 export * from './custom';
 
 export * from './Defaults';
 export * from './Form';
 export * from './Input';
+export { useFormValues };

package/src/components/ViewEditor/ViewEditor.tsx

@@ -21,7 +21,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  typename: Format.DXN.annotations({
+  typename: Format.URL.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -103,7 +103,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
+      <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}