@dxos/react-ui-form 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -3,26 +3,57 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import React, { type KeyboardEvent, type MouseEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
-import { Icon, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { PopoverCombobox } from '@dxos/react-ui-searchlist';
+import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-searchlist';
 
-import { type QueryTag } from '../../hooks';
 import { translationKey } from '../../translations';
 import { Form } from '../Form';
 
+export type RefOption = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
+
 export type ObjectPickerContentProps = ThemedClassName<{
-  options: QueryTag[];
+  options: RefOption[];
   selectedIds?: string[];
-  createSchema?: Schema.Schema.AnyNoContext;
   createOptionLabel?: [string, { ns: string }];
   createOptionIcon?: string;
+  createSchema?: Schema.Schema.AnyNoContext;
   createInitialValuePath?: string;
-  onSelect: (id: string) => void;
   onCreate?: (values: any) => void;
+  onSelect: (id: string) => void;
 }>;
 
+const CreateItem = ({
+  createOptionLabel,
+  createOptionIcon,
+  onCreateItemSelect,
+}: {
+  createOptionLabel: [string, { ns: string }];
+  createOptionIcon: string;
+  onCreateItemSelect: (query: string) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+  const { query } = useSearchListInput();
+
+  return (
+    <Combobox.Item
+      value='__create__'
+      label={t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })}
+      icon={createOptionIcon}
+      classNames='flex items-center gap-2'
+      closeOnSelect={false}
+      onSelect={() => {
+        onCreateItemSelect(query);
+      }}
+    />
+  );
+};
+
 const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
   (
     {
@@ -39,39 +70,27 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
     ref,
   ) => {
     const { t } = useTranslation(translationKey);
-
-    const [searchString, setSearchString] = useState('');
     const [showForm, setShowForm] = useState(false);
+    const [formInitialValue, setFormInitialValue] = useState<string>('');
+
+    const { results, handleSearch } = useSearchListResults({
+      items: options,
+    });
 
     const handleFormSave = useCallback(
       (values: any) => {
         onCreate?.(values);
         setShowForm(false);
-        setSearchString('');
+        setFormInitialValue('');
       },
       [onCreate],
     );
 
     const handleFormCancel = useCallback(() => {
       setShowForm(false);
-      setSearchString('');
+      setFormInitialValue('');
     }, []);
 
-    // TODO(thure): The following click and keydown handlers are necessary because `onSelect` is called after the
-    //  Popover is already closed. Augment/refactor CmdK, if possible, to facilitate stopping event default
-    //  and propagation.
-
-    const handleClick = useCallback(
-      (event: MouseEvent) => {
-        if (createSchema && (event.target as HTMLElement).closest('[data-value="__create__"]')) {
-          event.stopPropagation();
-          event.preventDefault();
-          setShowForm(true);
-        }
-      },
-      [createSchema],
-    );
-
     const handleKeyDown = useCallback(
       (event: KeyboardEvent) => {
         if (
@@ -83,70 +102,64 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
         ) {
           event.stopPropagation();
           event.preventDefault();
+          // Get the current query from the input element
+          const input = (event.currentTarget as HTMLElement).querySelector('input[type="text"]') as HTMLInputElement;
+          const currentQuery = input?.value || '';
+          setFormInitialValue(currentQuery);
           setShowForm(true);
         }
       },
       [createSchema],
     );
 
-    const labelById = useMemo(
-      () =>
-        options.reduce((acc: Record<string, string>, option) => {
-          acc[option.id.toLowerCase()] = option.label.toLowerCase();
-          return acc;
-        }, {}),
-      [options],
-    );
-
     return (
-      <PopoverCombobox.Content
-        {...props}
-        ref={ref}
-        filter={(value, search) => (value === '__create__' || labelById[value]?.includes(search.toLowerCase()) ? 1 : 0)}
-        onClickCapture={handleClick}
-        onKeyDownCapture={handleKeyDown}
-      >
+      <Combobox.Content {...props} ref={ref} onSearch={handleSearch} onKeyDownCapture={handleKeyDown}>
         {showForm && createSchema ? (
           <Popover.Viewport>
-            <Form
+            <Form.Root
+              testId='create-referenced-object-form'
               schema={createSchema}
-              values={createInitialValuePath ? { [createInitialValuePath]: searchString } : {}}
+              values={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
               onSave={handleFormSave}
               onCancel={handleFormCancel}
-              testId='create-referenced-object-form'
-            />
+            >
+              <Form.Viewport>
+                <Form.Content>
+                  <Form.FieldSet />
+                  <Form.Actions />
+                </Form.Content>
+              </Form.Viewport>
+            </Form.Root>
           </Popover.Viewport>
         ) : (
           <>
-            <PopoverCombobox.Input
-              placeholder={t('ref field combobox input placeholder')}
-              value={searchString}
-              onValueChange={setSearchString}
-              autoFocus
-            />
-            <PopoverCombobox.List>
-              {options.map((option) => (
-                <PopoverCombobox.Item
+            <Combobox.Input placeholder={t('ref field combobox input placeholder')} autoFocus />
+            <Combobox.List>
+              {results.map((option) => (
+                <Combobox.Item
                   key={option.id}
                   value={option.id}
+                  label={option.label}
+                  checked={selectedIds?.includes(option.id)}
                   onSelect={() => onSelect(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>
+                />
               ))}
-              {searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && (
-                <PopoverCombobox.Item value='__create__' classNames='flex items-center gap-2'>
-                  <Icon icon={createOptionIcon} />
-                  {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: searchString })}
-                </PopoverCombobox.Item>
+              {createOptionLabel && createOptionIcon && createSchema && onCreate && (
+                <CreateItem
+                  createOptionLabel={createOptionLabel}
+                  createOptionIcon={createOptionIcon}
+                  onCreateItemSelect={(query: string) => {
+                    setFormInitialValue(query);
+                    setShowForm(true);
+                  }}
+                />
               )}
-            </PopoverCombobox.List>
+            </Combobox.List>
           </>
         )}
-        <PopoverCombobox.Arrow />
-      </PopoverCombobox.Content>
+        <Combobox.Arrow />
+      </Combobox.Content>
     );
   },
 );
@@ -154,8 +167,9 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
 ObjectPickerContent.displayName = 'ObjectPickerContent';
 
 export const ObjectPicker = {
-  Root: PopoverCombobox.Root,
-  Trigger: PopoverCombobox.Trigger,
-  VirtualTrigger: PopoverCombobox.VirtualTrigger,
+  Root: Combobox.Root,
+  Portal: Combobox.Portal,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent,
 };

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Settings } from './Settings';
+
+faker.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Root>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Group>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+            <Input.Root>
+              <Input.TextInput placeholder='Input' />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+            <Input.Root>
+              <Input.Switch />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(3)} description={faker.lorem.paragraphs(2)}>
+            <Button>Test</Button>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Input,
+  type Label,
+  ScrollArea,
+  type ThemedClassName,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+const SETTINGS_SECTION_HEADING_NAME = 'Settings.SectionHeading';
+const SETTINGS_GROUP_NAME = 'Settings.Group';
+const SETTINGS_GROUP_BUTTON_NAME = 'Settings.GroupButton';
+const SETTINGS_CONTAINER_NAME = 'Settings.Container';
+const SETTINGS_FRAME_NAME = 'Settings.Frame';
+const SETTINGS_FRAME_ITEM_NAME = 'Settings.FrameItem';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+const SETTINGS_ITEM_INPUT_NAME = 'Settings.ItemInput';
+
+const styles = {
+  title: 'pb-trim-md text-base-surface-text text-lg',
+  description: 'text-base text-description',
+  grid: 'grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg',
+};
+
+//
+// Root
+//
+
+type SettingsRootProps = PropsWithChildren;
+
+const SettingsRoot = ({ children }: SettingsRootProps) => {
+  return (
+    <ScrollArea.Root orientation='vertical' className='dx-article'>
+      <ScrollArea.Viewport classNames='p-trim-md'>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Section
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  return (
+    <>
+      <SettingsSectionHeading title={title} description={description} />
+      <div className='w-full pt-trim-md space-y-trim-md'>{children}</div>
+    </>
+  );
+};
+
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+
+//
+// Section Heading
+//
+
+const SettingsSectionHeading = ({ title, description }: Omit<SettingsSectionProps, 'children'>) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='px-trim-md mt-trim-md mb-trim-md text-xl'>{toLocalizedString(title, t)}</h2>
+      {description && <p className='px-trim-md my-trim-md text-description'>{toLocalizedString(description, t)}</p>}
+    </>
+  );
+};
+
+SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
+
+//
+// Group Button
+//
+
+const SettingsGroupButton = ({ classNames, ...props }: ButtonProps) => {
+  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
+};
+
+SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
+
+//
+// Group
+//
+
+type SettingsGroupProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsGroup = ({ children, classNames }: SettingsGroupProps) => (
+  <div role='none' className={mx('group space-y-trim-md', classNames)}>
+    {children}
+  </div>
+);
+
+SettingsGroup.displayName = SETTINGS_GROUP_NAME;
+
+//
+// Frame
+//
+
+const SettingsFrame = ({ children }: SettingsGroupProps) => (
+  <div role='none' className='p-trim-md border border-separator rounded-md'>
+    {children}
+  </div>
+);
+
+SettingsFrame.displayName = SETTINGS_FRAME_NAME;
+
+//
+// Frame Item
+//
+
+const SettingsFrameItem = ({ title, description, children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <div role='group' className='min-w-0'>
+      <h3 className='text-lg mb-2'>{toLocalizedString(title, t)}</h3>
+      {description && <p className='my-trim-sm md:mb-0 text-description'>{toLocalizedString(description, t)}</p>}
+      {children}
+    </div>
+  );
+};
+
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+
+//
+// Container
+//
+
+const SettingsContainer = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div
+      role='none'
+      className={mx([
+        'dx-article',
+        '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
+        'border border-separator rounded-md',
+        classNames,
+      ])}
+    >
+      {children}
+    </div>
+  );
+};
+
+SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+
+//
+// Item
+//
+
+type SettingsItemProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <SettingsContainer classNames={styles.grid}>
+      <h3 className={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</h3>
+      <p className={styles.description}>{toLocalizedString(description, t)}</p>
+      <div role='none' className='overflow-hidden text-end py-1'>
+        {children}
+      </div>
+    </SettingsContainer>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+
+//
+// Item Input
+//
+
+const SettingsItemInput = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <Input.Root>
+      <SettingsContainer classNames={styles.grid}>
+        <Input.Label classNames={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</Input.Label>
+        <Input.DescriptionAndValidation>
+          <Input.Description classNames={styles.description}>{toLocalizedString(description, t)}</Input.Description>
+        </Input.DescriptionAndValidation>
+        <div role='none' className='text-end py-1'>
+          {children}
+        </div>
+      </SettingsContainer>
+    </Input.Root>
+  );
+};
+
+SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Section: SettingsSection,
+  SectionHeading: SettingsSectionHeading,
+  Group: SettingsGroup,
+  GroupButton: SettingsGroupButton,
+  Container: SettingsContainer,
+  Frame: SettingsFrame,
+  FrameItem: SettingsFrameItem,
+  Item: SettingsItem,
+  ItemInput: SettingsItemInput,
+};

package/src/components/{ControlSection → Settings}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ControlSection';
+export * from './Settings';