@dxos/react-ui-form 0.9.0 → 0.9.1-main.c7dcc2e112

package/dist/types/src/components/Form/fields/RefField.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import '@dxos/lit-ui/dx-tag-picker.pcss';
-import { type Database, Entity, Obj, Type } from '@dxos/echo';
-import { URI } from '@dxos/keys';
-import { type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
-import { type FormFieldComponentProps } from '../FormFieldComponent';
-/**
- * Find the option a ref-like form value points at. Matches on the local (entity-id) form so a bare local EID
- * (`echo:/<id>`, produced by `Ref.make`) still resolves against an option keyed by the entity's qualified
- * self URI (`echo://<space>/<id>`). Returns `undefined` when the value is not a ref or no option matches.
- *
- * Comparing by entity id is only sound within one space (ids are unique there, not globally). Two EIDs that
- * both carry a space authority must therefore agree on it: a qualified value and a qualified option from
- * different spaces never match, even when their entity ids coincide.
- */
-export declare const findRefOption: (value: unknown, options: RefOption[]) => RefOption | undefined;
-export type RefFieldProps = FormFieldComponentProps & Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap'> & {
-    db?: Database.Database;
-    useType?: (db?: Database.Database, typeUri?: URI.URI) => Type.AnyEntity;
-    useResults?: (db?: Database.Database, typename?: string) => Entity.Any[];
-    getOptions?: (objects: Entity.Any[], options?: {
-        parentLabel?: boolean;
-        getTypePlaceholder?: (typename: string) => string;
-    }) => RefOption[];
-    /**
-     * Persist a newly-created object. Called after the user fills out the
-     * inline create form and clicks Save. Should add the object to the
-     * database and return it (sync or async). The returned object is then
-     * wired into this slot's form value as a Ref.
-     */
-    onCreate?: (schema: Type.AnyEntity, values: any) => Obj.Unknown | Promise<Obj.Unknown> | undefined | void;
-};
-export declare const RefField: (props: RefFieldProps) => React.JSX.Element | null;
-//# sourceMappingURL=RefField.d.ts.map

package/dist/types/src/components/Form/fields/RefField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/RefField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,EAAU,GAAG,EAAqB,IAAI,EAAE,MAAM,YAAY,CAAC;AAIzF,OAAO,EAAY,GAAG,EAAE,MAAM,YAAY,CAAC;AAO3C,OAAO,EAAgB,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEjG,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,uBAAuB,CAAC;AAOrF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAAW,OAAO,WAAW,SAAS,EAAE,KAAG,SAAS,GAAG,SAsBhF,CAAC;AAiCF,MAAM,MAAM,aAAa,GAAG,uBAAuB,GACjD,IAAI,CACF,wBAAwB,EACxB,mBAAmB,GAAG,kBAAkB,GAAG,wBAAwB,GAAG,gBAAgB,CACvF,GAAG;IACF,EAAE,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAEvB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC;IACxE,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC;IACzE,UAAU,CAAC,EAAE,CACX,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,EACrB,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,KACnF,SAAS,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;CAC3G,CAAC;AAEJ,eAAO,MAAM,QAAQ,UAAW,aAAa,6BAwJ5C,CAAC"}

package/dist/types/src/components/Form/fields/RefField.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefField.test.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/RefField.test.ts"],"names":[],"mappings":""}

package/dist/types/src/components/Form/fields/SelectField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/SelectField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,uBAAuB,CAAC;AAErF,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvH,CAAC;AAEF,eAAO,MAAM,WAAW,2GAWrB,kBAAkB,6BA4CpB,CAAC"}

package/dist/types/src/components/Form/fields/SelectOptionField.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { type SelectOption } from '@dxos/echo/Format';
-import { type FormFieldComponentProps } from '../FormFieldComponent';
-export declare const SelectOptionField: ({ type, readonly, label, jsonPath, getStatus, getValue, onValueChange, }: FormFieldComponentProps<SelectOption[] | undefined>) => React.JSX.Element;
-//# sourceMappingURL=SelectOptionField.d.ts.map

package/dist/types/src/components/Form/fields/SelectOptionField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOptionField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/SelectOptionField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyF,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStD,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,uBAAuB,CAAC;AAErF,eAAO,MAAM,iBAAiB,6EAQ3B,uBAAuB,CAAC,YAAY,EAAE,GAAG,SAAS,CAAC,sBA4KrD,CAAC"}

package/dist/types/src/components/Form/fields/SelectOptionField.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOptionField.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/SelectOptionField.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4CxC,QAAA,MAAM,IAAI;;eAEwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOA,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/src/components/Form/fields/TextAreaField.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type FormFieldComponentProps } from '../FormFieldComponent';
-export declare const TextAreaField: ({ type, readonly, placeholder, onValueChange, onBlur, ...props }: FormFieldComponentProps<string>) => React.JSX.Element;
-//# sourceMappingURL=TextAreaField.d.ts.map

package/dist/types/src/components/Form/fields/TextAreaField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/TextAreaField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,uBAAuB,CAAC;AAEvF,eAAO,MAAM,aAAa,qEAOvB,uBAAuB,CAAC,MAAM,CAAC,sBAoBjC,CAAC"}

package/dist/types/src/components/Form/fields/TextField.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type FormFieldComponentProps } from '../FormFieldComponent';
-export declare const TextField: ({ type, readonly, placeholder, onBlur, onValueChange, ...props }: FormFieldComponentProps<string>) => React.JSX.Element;
-//# sourceMappingURL=TextField.d.ts.map

package/dist/types/src/components/Form/fields/TextField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,uBAAuB,CAAC;AAEvF,eAAO,MAAM,SAAS,qEAOnB,uBAAuB,CAAC,MAAM,CAAC,sBAoBjC,CAAC"}

package/dist/types/src/components/Form/fields/TupleField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TupleField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/TupleField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,uBAAuB,CAAC;AAIrF,eAAO,MAAM,UAAU,8FAUpB,uBAAuB,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IACnD,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,sBA4BA,CAAC"}

package/dist/types/src/components/Form/fields/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/dist/types/src/components/testing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/components/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMtD,KAAK,eAAe,GAAG,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC;AAEzD,eAAO,MAAM,UAAU,uBAAwB,eAAe,sBAgB7D,CAAC;AAIF,eAAO,MAAM,SAAS;;;;;;;;2HAMpB,CAAC;AAGH,eAAO,MAAM,wBAAwB,eAA4B,CAAC;AAClE,eAAO,MAAM,yBAAyB,eAA6B,CAAC;AACpE,eAAO,MAAM,8BAA8B,eAAkC,CAAC"}

package/src/components/Form/AUDIT.md

@@ -1,17 +0,0 @@
-# Form
-
-## New features/polish
-
-- [x] Unify readonly/inline modes.
-- [x] Refs
-  - [x] Single-select (fix popover)
-  - [x] Multi-select (array)
-- [ ] auto save doesn't work for combobox + select due to only firing on blur (workaround is to use onValuesChanged).
-- [ ] Don't call save/autoSave if value hasn't changed.
-- [ ] Fix onCancel (restore values).
-- [ ] Fix useSchema Type.AnyObj cast.
-- [ ] TableCellEditor (handleEnter/ModalController).
-- [ ] Use FormFieldWrapper uniformly
-- [ ] Inline tables.
-- [ ] Defer query until popover.
-- [ ] Omit id from sub properties (tune Omit)

package/src/components/Form/FormTooltipsContext.ts

@@ -1,25 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { createContext, useContext } from 'react';
-
-/**
- * A standalone context for the `tooltips` flag (Form.Root's only label
- * decoration today: a JSON-path hover tooltip rendered by
- * `FormFieldLabel`).
- *
- * Lives in its own module so that `FormFieldComponent.tsx` -- imported at
- * the top of `Form.tsx` -- can read the flag without re-importing from
- * `Form.tsx`. That round-trip used to create a circular module-eval
- * dependency that intermittently hit a TDZ ("Cannot access 'FormFieldLabel'
- * before initialization") in browser-mode storybook tests.
- *
- * Defaults to `true` both when `Form.Root` doesn't pass an explicit value
- * AND when there is no enclosing `Form.Root` (e.g. `FormFieldWrapper`
- * stories that render an input without a Form provider).
- */
-export const FormTooltipsContext = createContext<boolean>(true);
-
-/** Returns whether the enclosing `Form.Root` has field tooltips enabled. */
-export const useFormTooltips = (): boolean => useContext(FormTooltipsContext);

package/src/components/Form/Layout/annotation.ts

@@ -1,38 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { createAnnotationHelper } from '@dxos/echo/internal';
-
-/**
- * Annotation carrying one or more named `FormLayout` DSL templates that
- * control how `Form.FieldSet` / `Form.Layout` arrange a schema's fields.
- * Callers select a variant via the `name` prop; the implicit name is
- * `DEFAULT_LAYOUT_NAME` (`'default'`).
- *
- * Templates use a minimal XML grammar — see `parser.ts`. Example:
- *
- *   FormLayoutAnnotation.set({
- *     default: `
- *       <grid cols="2">
- *         <field name="origin"/>
- *         <field name="destination"/>
- *         <field name="provider" span="2"/>
- *       </grid>
- *     `,
- *     card: `
- *       <grid cols="1">
- *         <field name="provider"/>
- *         <field name="number"/>
- *       </grid>
- *     `,
- *   })
- */
-export const FormLayoutAnnotationId = Symbol.for('@dxos/react-ui-form/annotation/Layout');
-
-export type FormLayoutMap = Record<string, string>;
-
-export const FormLayoutAnnotation = createAnnotationHelper<FormLayoutMap>(FormLayoutAnnotationId);
-
-/** Name used when no explicit variant is requested. */
-export const DEFAULT_LAYOUT_NAME = 'default';

package/src/components/Form/README.md

@@ -1,3 +0,0 @@
-# Form
-
-- [ ] Layout options (e.g., label on the side.)

package/src/components/Form/fields/ArrayField.tsx

@@ -1,173 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import * as SchemaAST from 'effect/SchemaAST';
-import React, { useCallback } from 'react';
-
-import { Ref } from '@dxos/echo';
-import { SchemaEx } from '@dxos/effect';
-import { useTranslation } from '@dxos/react-ui';
-
-import { translationKey } from '#translations';
-
-import { getFormProperties } from '../../../util';
-import { useFormValues } from '../Form';
-import { FormField, IconBlock, type FormFieldProps } from '../FormField';
-import { FormFieldLabel, type FormFieldStateProps } from '../FormFieldComponent';
-
-export type ArrayFieldProps = {
-  label: string;
-  fieldProps: FormFieldStateProps;
-} & FormFieldProps;
-
-export const ArrayField = ({
-  type,
-  path,
-  label,
-  readonly,
-  layout,
-  fieldProps: inputProps,
-  ...props
-}: ArrayFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const elementType = SchemaEx.getArrayElementType(type);
-  const { onValueChange } = inputProps;
-  const values = useFormValues(ArrayField.displayName, path, () => []);
-
-  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
-    const baseNode = SchemaEx.findNode(typeNode, SchemaEx.isDiscriminatedUnion);
-    const typeLiteral = baseNode
-      ? SchemaEx.getDiscriminatedType(baseNode, {})
-      : SchemaEx.findNode(typeNode, SchemaAST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-
-    return Object.fromEntries(
-      getFormProperties(typeLiteral).map((prop) => {
-        const defaultValue = SchemaAST.getDefaultAnnotation(prop.type).pipe((annotation) =>
-          Option.getOrUndefined(annotation),
-        );
-        return [prop.name, defaultValue];
-      }),
-    );
-  };
-
-  const handleAdd = useCallback(() => {
-    const defaultValue =
-      SchemaEx.isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    // `values` is `undefined` on first render for arrays whose parent path
-    // hasn't been materialised in the form values yet (e.g. `package.repos`
-    // when the form starts with no `package`). `useFormValues`'s default-
-    // value effect would eventually backfill it to `[]`, but until then the
-    // old `values && ...` guard silently swallowed the click. Treat a
-    // missing array as empty so Add always produces `[defaultValue]`.
-    onValueChange(type, [...(values ?? []), defaultValue]);
-  }, [onValueChange, type, elementType, values]);
-
-  const handleDelete = useCallback(
-    (idx: number) => {
-      onValueChange(
-        type,
-        values?.filter((_, i) => i !== idx),
-      );
-    },
-    [onValueChange, type, values],
-  );
-
-  if (!elementType || ((readonly || layout === 'static') && values && values.length < 1)) {
-    return null;
-  }
-
-  const renderItemAsObject = elementType && SchemaEx.isNestedType(elementType) && !Ref.isRefType(elementType);
-
-  return (
-    <>
-      {(layout !== 'static' || (values && values.length > 0)) && (
-        <div className='flex items-center gap-2'>
-          <div className='flex-1 min-w-0'>
-            <FormFieldLabel readonly={readonly} label={label} path={SchemaEx.createJsonPath(path ?? [])} asChild />
-          </div>
-          {!readonly && layout !== 'static' && (
-            <IconBlock inline icon='ph--plus--regular' label={t('add-item.button')} onClick={handleAdd} />
-          )}
-        </div>
-      )}
-
-      <div className='flex flex-col'>
-        {values?.map((_, index) => {
-          const isLast = index === values.length - 1;
-
-          // Object items: each row contains a recursively-rendered FormField
-          //   (multiple sub-rows for the object's fields) wrapped in a border,
-          //   with the delete button bottom-aligned next to it.
-          // Scalar items: a single-row inline FormField with a center-aligned
-          //   delete button. Refs and primitive arrays use this layout.
-          const fieldField = (
-            <FormField
-              {...props}
-              autoFocus={isLast}
-              type={elementType}
-              // Suppress the per-item header for object items only — the recursive
-              // form already renders labels for each sub-field. Scalar items
-              // (refs, primitives) keep the parent name so inline-layout
-              // children (e.g. RefField) have a real label to use as a
-              // fallback placeholder.
-              {...(renderItemAsObject && { name: null })}
-              path={[...(path ?? []), index]}
-              readonly={readonly || layout === 'static'}
-              layout={renderItemAsObject ? (layout === 'static' ? 'static' : undefined) : 'inline'}
-            />
-          );
-
-          return (
-            <div key={index} className='grid grid-cols-[1fr_min-content] items-center mb-1 last:mb-form-gap'>
-              {fieldField}
-              {!readonly && layout !== 'static' && (
-                <IconBlock
-                  inline={!renderItemAsObject}
-                  icon='ph--x--regular'
-                  label={t('remove-item.button')}
-                  onClick={() => handleDelete(index)}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-ArrayField.displayName = 'Form.ArrayField';
-
-/**
- * Returns the default empty value for a given AST.
- * Used for initializing new array values etc.
- */
-// TODO(wittjosiah): Factor out?
-export const getDefaultValue = (ast?: SchemaAST.AST): any => {
-  switch (ast?._tag) {
-    case 'StringKeyword': {
-      return '';
-    }
-    case 'NumberKeyword': {
-      return 0;
-    }
-    case 'BooleanKeyword': {
-      return false;
-    }
-    case 'Suspend': {
-      return getDefaultValue(ast.f());
-    }
-    default: {
-      if (ast && SchemaEx.isNestedType(ast)) {
-        return {};
-      } else {
-        throw new Error(`Unsupported type: ${ast?._tag}`);
-      }
-    }
-  }
-};