@dxos/react-ui-form 0.8.4-main.c1de068 → 0.8.4-main.e098934

package/src/components/Form/Input.tsx

@@ -19,9 +19,12 @@ export type InputProps = {
   type: SimpleType;
   format?: FormatEnum;
   label: string;
-  disabled?: boolean;
   placeholder?: string;
   inputOnly?: boolean;
+  /**
+   * Specifies the readonly variant: either disabled inputs, elements indicating they are usually editable but currently are not; or `static`, a field’s representation as regular content without signifiers that it is ever editable.
+   */
+  readonly?: 'disabled-input' | 'static' | false;
 } & FormInputStateProps;
 
 /**

package/src/components/Form/RefField.tsx

@@ -3,38 +3,50 @@
 //
 
 import { type SchemaAST } from 'effect';
-import React, { useCallback, useMemo, type FocusEvent } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   Expando,
-  getTypeAnnotation,
   Ref,
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
+  type TypeAnnotation,
+  getTypeAnnotation,
 } from '@dxos/echo-schema';
 import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
-import { DxRefTag } from '@dxos/lit-ui/react';
-import { Input, useTranslation } from '@dxos/react-ui';
-import { TagPicker, type TagPickerMode, type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { type DxTagPickerItemClick } from '@dxos/lit-ui';
+import { DxAnchor } from '@dxos/lit-ui/react';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { PopoverCombobox } from '@dxos/react-ui-searchlist';
+import { TagPickerItem } from '@dxos/react-ui-tag-picker';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
+import { type MaybePromise, isNonNullable } from '@dxos/util';
 
-import { TextInput } from './Defaults';
-import { InputHeader, type InputProps } from './Input';
 import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
 import { translationKey } from '../../translations';
 
-type RefFieldProps = InputProps & {
+import { TextInput } from './Defaults';
+import { InputHeader, type InputProps } from './Input';
+
+export type RefFieldProps = InputProps & {
   ast?: SchemaAST.AST;
   array?: boolean;
   onQueryRefOptions?: QueryRefOptions;
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon?: string;
+  onCreateFromQuery?: (type: TypeAnnotation, query: string) => MaybePromise<void>;
+};
+
+// TODO(thure): Is this a standard that should be better canonized?
+const isRefSnapShot = (val: any): val is { '/': string } => {
+  return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
 };
 
 export const RefField = ({
   type,
   label,
-  disabled,
+  readonly,
   placeholder,
   inputOnly,
   array,
@@ -42,6 +54,9 @@ export const RefField = ({
   getValue,
   onBlur,
   onQueryRefOptions,
+  createOptionLabel,
+  createOptionIcon,
+  onCreateFromQuery,
   onValueChange,
   ...restInputProps
 }: RefFieldProps) => {
@@ -56,17 +71,18 @@ export const RefField = ({
     // If ref type is expando, fall back to taking a DXN in string format.
     return (
       <RefFieldFallback
-        {...{ type, label, placeholder, disabled, inputOnly, getValue, onBlur, onValueChange, ...restInputProps }}
+        {...{ type, label, placeholder, readonly, inputOnly, getValue, onBlur, onValueChange, ...restInputProps }}
       />
     );
   }
 
-  const handleGetValue = useCallback((): TagPickerItemData[] => {
+  const handleGetValue = useCallback(() => {
     const formValue = getValue();
 
     const unknownToRefOption = (val: unknown) => {
-      if (Ref.isRef(val)) {
-        const dxnString = val.dxn.toString();
+      const isRef = Ref.isRef(val);
+      if (isRef || isRefSnapShot(val)) {
+        const dxnString = isRef ? val.dxn.toString() : val['/'];
         const matchingOption = availableOptions.find((option) => option.id === dxnString);
         if (matchingOption) {
           return matchingOption;
@@ -87,15 +103,6 @@ export const RefField = ({
     return [];
   }, [getValue, availableOptions, array]);
 
-  const handleSearch = useCallback(
-    (text: string, ids: string[]): TagPickerItemData[] =>
-      availableOptions
-        .filter((option) => !ids.includes(option.id))
-        .filter((option) => option.label.toLowerCase().includes(text.toLowerCase()))
-        .map((option) => ({ id: option.id, label: option.label, hue: option.hue as any })),
-    [availableOptions],
-  );
-
   const handleUpdate = useCallback(
     (ids: string[]) => {
       if (ids.length === 0) {
@@ -123,8 +130,6 @@ export const RefField = ({
     [availableOptions, array, onValueChange],
   );
 
-  const tagPickerMode: TagPickerMode = useMemo(() => (array ? 'multi-select' : 'single-select'), [array]);
-
   if (!refTypeInfo) {
     return null;
   }
@@ -132,32 +137,113 @@ export const RefField = ({
   const { status, error } = restInputProps.getStatus();
 
   const items = handleGetValue();
+  const selectedIds = useMemo(() => items.map((i: any) => i.id), [items]);
+  const labelById = useMemo(
+    () =>
+      availableOptions.reduce((acc: Record<string, string>, option) => {
+        acc[option.id.toLowerCase()] = option.label.toLowerCase();
+        return acc;
+      }, {}),
+    [availableOptions],
+  );
+  const [query, setQuery] = useState('');
+  const toggleSelect = useCallback(
+    (id: string) => {
+      if (array) {
+        const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id];
+        handleUpdate(nextIds);
+      } else {
+        if (selectedIds[0] === id) {
+          handleUpdate([]);
+        } else {
+          handleUpdate([id]);
+        }
+      }
+    },
+    [array, selectedIds, handleUpdate],
+  );
 
   // NOTE(thure): I left both predicates in-place in case we decide to add variants which do render readonly but empty values.
-  return disabled && items.length < 1 ? null : (
+  return readonly && items.length < 1 ? null : (
     <Input.Root validationValence={status}>
       {!inputOnly && <InputHeader error={error} label={label} />}
       <div data-no-submit>
-        {disabled ? (
+        {readonly ? (
           items.length < 1 ? (
             <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
           ) : (
             items.map((item) => (
-              <DxRefTag key={item.id} refid={item.id} rootclassname='mie-1' style={{ marginInlineEnd: '.25rem' }}>
+              <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
                 {item.label}
-              </DxRefTag>
+              </DxAnchor>
             ))
           )
         ) : (
-          <TagPicker
-            readonly={disabled}
-            items={items}
-            mode={tagPickerMode}
-            onBlur={(event) => onBlur(event as unknown as FocusEvent<HTMLElement>)}
-            onUpdate={handleUpdate}
-            onSearch={handleSearch}
-            classNames='bg-inputSurface p-1.5 rounded-sm'
-          />
+          <PopoverCombobox.Root>
+            <PopoverCombobox.Trigger asChild>
+              <Button variant='ghost' classNames='is-full text-start gap-2'>
+                <div role='none' className='grow'>
+                  {items?.length ? (
+                    items?.map((item) => (
+                      <TagPickerItem
+                        key={item.id}
+                        itemId={item.id}
+                        label={item.label}
+                        {...(item.hue ? { hue: item.hue } : {})}
+                        removeLabel={t('remove item label')}
+                        onItemClick={(event: DxTagPickerItemClick) => {
+                          if (event.action === 'remove') {
+                            toggleSelect(item.id);
+                          }
+                        }}
+                      />
+                    ))
+                  ) : (
+                    <span className='text-description'>
+                      {placeholder ?? t('ref field placeholder', { count: array ? 99 : 1 })}
+                    </span>
+                  )}
+                </div>
+                <Icon size={3} icon='ph--caret-down--bold' />
+              </Button>
+            </PopoverCombobox.Trigger>
+            <PopoverCombobox.Content
+              filter={(value, search) =>
+                value === '__create__' || labelById[value]?.includes(search.toLowerCase()) ? 1 : 0
+              }
+            >
+              <PopoverCombobox.Input
+                placeholder={'Search...'}
+                value={query}
+                onValueChange={(v) => setQuery(v)}
+                autoFocus
+              />
+              <PopoverCombobox.List>
+                {availableOptions.map((option) => (
+                  <PopoverCombobox.Item
+                    key={option.id}
+                    value={option.id}
+                    onSelect={() => toggleSelect(option.id)}
+                    classNames='flex items-center gap-2'
+                  >
+                    <span className='grow'>{option.label}</span>
+                    {selectedIds.includes(option.id) && <Icon icon='ph--check--regular' />}
+                  </PopoverCombobox.Item>
+                ))}
+                {query.length > 0 && createOptionLabel && createOptionIcon && onCreateFromQuery && (
+                  <PopoverCombobox.Item
+                    value='__create__'
+                    onSelect={() => onCreateFromQuery?.(refTypeInfo, query)}
+                    classNames='flex items-center gap-2'
+                  >
+                    <Icon icon={createOptionIcon} />
+                    {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })}
+                  </PopoverCombobox.Item>
+                )}
+              </PopoverCombobox.List>
+              <PopoverCombobox.Arrow />
+            </PopoverCombobox.Content>
+          </PopoverCombobox.Root>
         )}
       </div>
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
@@ -168,7 +254,7 @@ export const RefField = ({
 const RefFieldFallback = ({
   type,
   label,
-  disabled,
+  readonly,
   placeholder,
   inputOnly,
   getValue,
@@ -202,7 +288,7 @@ const RefFieldFallback = ({
     <TextInput
       type={type}
       label={label}
-      disabled={disabled}
+      readonly={readonly}
       placeholder={placeholder}
       inputOnly={inputOnly}
       getValue={handleGetValue as <V>() => V | undefined}

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

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState, useEffect, useMemo, type ChangeEvent } from 'react';
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
+import { GeoLocation, type GeoPoint } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
+export const GeoPointInput = ({ type, label, readonly, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
   const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
@@ -48,24 +48,32 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
     <Input.Root validationValence={status}>
       <InputHeader error={error} label={label} />
       <div role='none' className='grid grid-cols-2 gap-2'>
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={latitudeText}
-          onChange={handleCoordinateChange('latitude', setLatitudeText)}
-          onBlur={onBlur}
-        />
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={longitudeText}
-          onChange={handleCoordinateChange('longitude', setLongitudeText)}
-          onBlur={onBlur}
-        />
+        <div role='none'>
+          <Input.Label>{t('latitude label')}</Input.Label>
+          <Input.TextInput
+            type='number'
+            step='0.00001'
+            min='-90'
+            max='90'
+            disabled={!!readonly}
+            value={latitudeText}
+            onChange={handleCoordinateChange('latitude', setLatitudeText)}
+            onBlur={onBlur}
+          />
+        </div>
+        <div role='none'>
+          <Input.Label>{t('longitude label')}</Input.Label>
+          <Input.TextInput
+            type='number'
+            step='0.00001'
+            min='-180'
+            max='180'
+            disabled={!!readonly}
+            value={longitudeText}
+            onChange={handleCoordinateChange('longitude', setLongitudeText)}
+            onBlur={onBlur}
+          />
+        </div>
       </div>
     </Input.Root>
   );

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

@@ -8,14 +8,15 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { SelectOptionInput } from './SelectOptionsInput';
 import { translations } from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 
+import { SelectOptionInput } from './SelectOptionsInput';
+
 const schema = Schema.Struct({
   options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
 }).pipe(Schema.mutable);
@@ -44,18 +45,18 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput,
+  component: SelectOptionInput as any,
   render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

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

@@ -2,20 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 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 { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { hues, subtleHover } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-// TODO(ZaymonFC): Handle disabled.
-export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue, onValueChange }: InputProps) => {
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -115,7 +114,12 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
       <InputHeader error={error} label={label} />
       <div role='none'>
         {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+          <List.Root
+            items={options}
+            isItem={(item) => true}
+            onMove={readonly ? undefined : handleMove}
+            readonly={!!readonly}
+          >
             {({ items }) => (
               <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
@@ -123,26 +127,30 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={['p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay']}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle />
+                        <List.ItemDragHandle disabled={!!readonly} />
                         <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
                           {/* TODO(ZaymonFC): Move spacer into Tag component. */}
                           <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                         </List.ItemTitle>
-                        <Icon
+                        <IconButton
+                          iconOnly
+                          variant='ghost'
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
                             <Input.TextInput
+                              disabled={!!readonly}
                               placeholder={t('select option label placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
@@ -151,14 +159,9 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               classNames='flex-1'
                               data-no-submit
                             />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePicker
-                                value={item.color}
-                                onChange={handleColorChange(item.id)}
-                                rootVariant='toolbar-button'
-                              />
-                            </Toolbar.Root>
+                            <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
                               label={t('select option delete')}
@@ -170,18 +173,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     </List.Item>
                   </div>
                 ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--plus--regular'
+                  label={t('select option add')}
+                  onClick={handleAdd}
+                  disabled={!!readonly}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

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

@@ -16,7 +16,7 @@ export const TupleInput = ({
   binding,
   type,
   label,
-  disabled,
+  readonly,
   getStatus,
   getValue,
   onValueChange,
@@ -35,7 +35,7 @@ export const TupleInput = ({
           <Input.TextInput
             key={prop}
             type='number'
-            disabled={disabled}
+            disabled={!!readonly}
             value={values[prop]}
             onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
             onBlur={onBlur}

package/src/components/Form/factory.tsx

@@ -5,9 +5,9 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
+import { GeoPointInput } from './custom';
 import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
-import { GeoPointInput } from './custom';
 
 /**
  * Get property input component.