@dxos/react-ui-form 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/components/Form/Defaults.tsx

@@ -1,205 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Input, Select, useTranslation } from '@dxos/react-ui';
-
-import { translationKey } from '../../translations';
-
-import { InputHeader, type InputProps } from './Input';
-
-export const TextInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps) => {
-  const { status, error } = getStatus();
-
-  return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
-    <p>{getValue() ?? ''}</p>
-  ) : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{getValue() ?? ''}</p>
-      ) : (
-        <Input.TextInput
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={getValue() ?? ''}
-          onChange={(event) => onValueChange(type, event.target.value)}
-          onBlur={onBlur}
-        />
-      )}
-      {inputOnly && <Input.Validation>{error}</Input.Validation>}
-    </Input.Root>
-  );
-};
-
-export const NumberInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps) => {
-  const { status, error } = getStatus();
-
-  return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
-    <p>{getValue() ?? ''}</p>
-  ) : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{getValue() ?? ''}</p>
-      ) : (
-        <Input.TextInput
-          type='number'
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={getValue()}
-          onChange={(event) => onValueChange(type, event.target.value)}
-          onBlur={onBlur}
-        />
-      )}
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, readonly }: InputProps) => {
-  const { status, error } = getStatus();
-  const checked = Boolean(getValue());
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
-      ) : (
-        <Input.Switch disabled={!!readonly} checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
-      )}
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-export type SelectInputOptions = InputProps & {
-  options?: Array<{ value: string | number; label?: string }>;
-};
-
-export const SelectInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  options,
-  getStatus,
-  getValue,
-  onValueChange,
-}: SelectInputOptions) => {
-  const { status, error } = getStatus();
-
-  const value = getValue() as string | undefined;
-  const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
-
-  return readonly && !value ? null : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
-      ) : (
-        <Select.Root value={value} onValueChange={handleValueChange}>
-          {/* TODO(burdon): Placeholder not working? */}
-          <Select.TriggerButton classNames='is-full' disabled={!!readonly} placeholder={placeholder} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {options?.map(({ value, label }) => (
-                  // NOTE: Numeric values are converted to and from strings.
-                  <Select.Option key={String(value)} value={String(value)}>
-                    {label ?? String(value)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      )}
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-export const MarkdownInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  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} label={label} />}
-      {readonly === 'static' ? (
-        <p>{getValue() ?? ''}</p>
-      ) : (
-        <Input.TextArea
-          ref={textareaRef}
-          disabled={!!readonly}
-          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/FormActions.tsx

@@ -1,54 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { cardSpacing } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
-
-import { translationKey } from '../../translations';
-
-import { useFormContext } from './FormContext';
-
-export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
-
-export type FormActionsProps = {
-  readonly?: boolean;
-  onCancel?: () => void;
-  outerSpacing?: FormOuterSpacing;
-};
-
-export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormActionsProps) => {
-  const { t } = useTranslation(translationKey);
-  const { canSave, handleSave } = useFormContext();
-
-  return (
-    <div
-      role='none'
-      className={mx(
-        outerSpacing === 'scroll-fields'
-          ? 'pli-cardSpacingInline mbe-cardSpacingBlock'
-          : outerSpacing
-            ? cardSpacing
-            : 'mbs-cardSpacingBlock',
-        'flex [&_button]:grow gap-1 first:mbs-0',
-      )}
-    >
-      {onCancel && !readonly && (
-        <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
-      )}
-      {handleSave && (
-        <IconButton
-          type='submit'
-          data-testid='save-button'
-          disabled={!canSave}
-          icon='ph--check--regular'
-          label={t('button save')}
-          onClick={handleSave}
-        />
-      )}
-    </div>
-  );
-};

package/src/components/Form/FormContent.tsx

@@ -1,302 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Schema, SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { forwardRef, useMemo } from 'react';
-
-import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { type ProjectionModel, type SchemaProperty, getSchemaProperties } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
-
-import { type QueryRefOptions } from '../../hooks';
-import { getRefProps } from '../../util';
-
-import { ArrayField } from './ArrayField';
-import { SelectInput } from './Defaults';
-import { getInputComponent } from './factory';
-import { type ComponentLookup } from './Form';
-import { useFormValues, useInputProps } from './FormContext';
-import { type InputComponent } from './Input';
-import { RefField, type RefFieldProps } from './RefField';
-
-export type FormFieldProps = {
-  property: SchemaProperty<any>;
-  path?: (string | number)[];
-  /** Used to indicate if input should be presented inline (e.g. for array items). */
-  inline?: boolean;
-  projection?: ProjectionModel;
-  lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-} & Pick<
-  RefFieldProps,
-  'readonly' | 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'
->;
-
-export const FormField = ({
-  property,
-  path,
-  readonly,
-  inline,
-  projection,
-  onQueryRefOptions,
-  createOptionLabel,
-  createOptionIcon,
-  onCreateFromQuery,
-  lookupComponent,
-  Custom,
-}: FormFieldProps) => {
-  const { ast, name, type, format, title, description, options, examples, array } = property;
-  const inputProps = useInputProps(path);
-
-  const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
-  const placeholder = useMemo(
-    () => (examples?.length ? `Example: "${examples[0]}"` : description),
-    [examples, description],
-  );
-
-  //
-  // Registry and Custom.
-  //
-
-  const FoundComponent = lookupComponent?.({
-    prop: name,
-    schema: Schema.make(ast),
-    inputProps: {
-      type,
-      format,
-      label,
-      readonly,
-      placeholder,
-      ...inputProps,
-    },
-  });
-
-  if (FoundComponent) {
-    return FoundComponent;
-  }
-
-  const jsonPath = createJsonPath(path ?? []);
-  const CustomComponent = Custom?.[jsonPath];
-  if (CustomComponent) {
-    return (
-      <CustomComponent
-        type={type}
-        format={format}
-        label={label}
-        inputOnly={inline}
-        placeholder={placeholder}
-        readonly={readonly}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Refs.
-  //
-
-  const refProps = getRefProps(property);
-  if (refProps) {
-    return (
-      <RefField
-        ast={refProps.ast}
-        array={refProps.isArray}
-        type={type}
-        format={format}
-        label={label}
-        placeholder={placeholder}
-        readonly={readonly}
-        inputOnly={inline}
-        onQueryRefOptions={onQueryRefOptions}
-        createOptionLabel={createOptionLabel}
-        createOptionIcon={createOptionIcon}
-        onCreateFromQuery={onCreateFromQuery}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Arrays.
-  //
-
-  if (array) {
-    return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
-  }
-
-  //
-  // Standard Inputs.
-  //
-
-  const InputComponent = getInputComponent(type, format);
-  if (InputComponent) {
-    return (
-      <InputComponent
-        type={type}
-        format={format}
-        label={label}
-        inputOnly={inline}
-        placeholder={placeholder}
-        readonly={readonly}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Select.
-  //
-
-  if (options) {
-    return (
-      <SelectInput
-        type={type}
-        format={format}
-        readonly={readonly}
-        inputOnly={inline}
-        label={label}
-        options={options.map((option) => ({ value: option, label: String(option) }))}
-        placeholder={placeholder}
-        {...inputProps}
-      />
-    );
-  }
-
-  //
-  // Nested Objects.
-  //
-
-  if (type === 'object') {
-    const baseNode = findNode(ast, isDiscriminatedUnion);
-    const typeLiteral = baseNode
-      ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
-      : findNode(ast, SchemaAST.isTypeLiteral);
-
-    if (typeLiteral) {
-      return (
-        <>
-          {!inline && <h3 className={mx('text-lg mlb-inputSpacingBlock first:mbs-0')}>{label}</h3>}
-          <FormFields
-            schema={Schema.make(typeLiteral)}
-            path={path}
-            readonly={readonly}
-            projection={projection}
-            onQueryRefOptions={onQueryRefOptions}
-            createOptionLabel={createOptionLabel}
-            createOptionIcon={createOptionIcon}
-            onCreateFromQuery={onCreateFromQuery}
-            Custom={Custom}
-            lookupComponent={lookupComponent}
-          />
-        </>
-      );
-    }
-  }
-
-  return null;
-};
-
-export type FormFieldsProps = ThemedClassName<
-  {
-    testId?: string;
-    schema: Schema.Schema.All;
-    /**
-     * Path to the current object from the root. Used with nested forms.
-     */
-    path?: (string | number)[];
-    filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
-    sort?: string[];
-    /**
-     * Optional projection for projection-based field management
-     */
-    projection?: ProjectionModel;
-    lookupComponent?: ComponentLookup;
-    /**
-     * Map of custom renderers for specific properties.
-     * Prefer lookupComponent for plugin specific input surfaces.
-     */
-    Custom?: Partial<Record<string, InputComponent>>;
-    onQueryRefOptions?: QueryRefOptions;
-  } & Pick<FormFieldProps, 'readonly'> &
-    Pick<RefFieldProps, 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'>
->;
-
-export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
-  (
-    {
-      classNames,
-      schema,
-      path,
-      filter,
-      sort,
-      projection,
-      readonly,
-      lookupComponent,
-      Custom,
-      onQueryRefOptions,
-      ...props
-    },
-    forwardRef,
-  ) => {
-    const values = useFormValues(path);
-    const properties = useMemo(() => {
-      const props = getSchemaProperties(schema.ast, values);
-
-      // Use projection-based field management when view and projection are available
-      if (projection) {
-        const fieldProjections = projection.getFieldProjections();
-        const hiddenProperties = new Set(projection.getHiddenProperties());
-
-        // Filter properties to only include visible ones and order by projection
-        const visibleProps = props.filter((prop) => !hiddenProperties.has(prop.name));
-        const orderedProps: SchemaProperty<any>[] = [];
-
-        // Add properties in projection field order
-        for (const fieldProjection of fieldProjections) {
-          const fieldPath = String(fieldProjection.field.path);
-          const prop = visibleProps.find((p) => p.name === fieldPath);
-          if (prop) {
-            orderedProps.push(prop);
-          }
-        }
-
-        // Add any remaining properties not in projection
-        const projectionPaths = new Set(fieldProjections.map((fp) => String(fp.field.path)));
-        const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name));
-        orderedProps.push(...remainingProps);
-
-        return orderedProps;
-      }
-
-      // Fallback to legacy filter/sort behavior
-      const filtered = filter ? filter(props) : props;
-      return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-    }, [schema, values, filter, sort, projection?.fields]);
-
-    return (
-      <div role='form' className={mx('is-full', classNames)} ref={forwardRef}>
-        {properties
-          .map((property) => {
-            return (
-              <FormField
-                key={property.name}
-                property={property}
-                path={[...(path ?? []), property.name]}
-                readonly={readonly}
-                projection={projection}
-                onQueryRefOptions={onQueryRefOptions}
-                lookupComponent={lookupComponent}
-                Custom={Custom}
-                {...props}
-              />
-            );
-          })
-          .filter(isNotFalsy)}
-      </div>
-    );
-  },
-);

package/src/components/Form/FormContext.tsx

@@ -1,110 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, {
-  type FocusEvent,
-  type PropsWithChildren,
-  type RefObject,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from 'react';
-
-import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo-schema';
-import { type SimpleType, createJsonPath } from '@dxos/effect';
-
-import { type FormHandler, type FormOptions, useForm } from '../../hooks';
-
-type FormContextValue<T extends BaseObject> = FormHandler<T>;
-
-const FormContext = createContext<FormContextValue<any> | undefined>(undefined);
-
-export const useFormContext = <T extends BaseObject>(): FormContextValue<T> => {
-  return useContext(FormContext) ?? raise(new Error('Missing FormContext'));
-};
-
-export const useFormValues = (path: (string | number)[] = []): any => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath(path);
-  return getValue(formValues, jsonPath) as BaseObject;
-};
-
-export type FormInputStateProps = {
-  getStatus: () => { status?: 'error'; error?: string };
-  getValue: <V>() => V | undefined;
-  onValueChange: (type: SimpleType, value: any) => void;
-  onBlur: (event: FocusEvent<HTMLElement>) => void;
-};
-
-export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-
-  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,
-  formRef,
-  autoSave,
-  ...formOptions
-}: PropsWithChildren<
-  FormOptions<any> & {
-    formRef?: RefObject<HTMLDivElement>;
-    autoSave?: boolean;
-  }
->) => {
-  const form = useForm(formOptions);
-
-  const handleKeyDown = useCallback(
-    (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') ||
-        (event.target as HTMLElement).closest('[data-no-submit]') !== null;
-
-      // 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();
-        }
-      }
-    },
-    [form, autoSave],
-  );
-
-  useEffect(() => {
-    if (!formRef?.current) {
-      return;
-    }
-
-    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>;
-};