@dxos/react-ui-table 0.4.10-main.3e35a2f → 0.4.10-main.3f5e2d2

package/src/components/ColumnMenu/ColumnMenu.tsx

@@ -66,41 +66,43 @@ export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }:
             </Popover.Anchor>
           </DropdownMenu.Trigger>
 
-          <DropdownMenu.Content onCloseAutoFocus={onDropdownCloseAutoFocus} sideOffset={4} collisionPadding={8}>
-            <DropdownMenu.Viewport>
-              {canSort && (
-                <>
-                  <DropdownMenu.Item onClick={() => onSelectSort('asc')}>
-                    <span className='grow'>Sort ascending</span>
-                    <span className='opacity-50'>
-                      <ArrowUp className={getSize(4)} />
-                    </span>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item onClick={() => onSelectSort('desc')}>
-                    <span className='grow'>Sort descending</span>
-                    <span className='opacity-50'>
-                      <ArrowDown className={getSize(4)} />
-                    </span>
-                  </DropdownMenu.Item>
-                  {sortDirection !== false && (
-                    <DropdownMenu.Item onClick={onClearSort}>
-                      <span className='grow'>Clear sort</span>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content onCloseAutoFocus={onDropdownCloseAutoFocus} sideOffset={4} collisionPadding={8}>
+              <DropdownMenu.Viewport>
+                {canSort && (
+                  <>
+                    <DropdownMenu.Item onClick={() => onSelectSort('asc')}>
+                      <span className='grow'>Sort ascending</span>
                       <span className='opacity-50'>
-                        <X className={getSize(4)} />
+                        <ArrowUp className={getSize(4)} />
                       </span>
                     </DropdownMenu.Item>
-                  )}
-                </>
-              )}
-              <DropdownMenu.Item onClick={onOpenColumnSettings}>
-                <span className='grow'>Column settings</span>
-                <span className='opacity-50'>
-                  <GearSix className={mx(getSize(4), 'rotate-90')} />
-                </span>
-              </DropdownMenu.Item>
-            </DropdownMenu.Viewport>
-            <DropdownMenu.Arrow />
-          </DropdownMenu.Content>
+                    <DropdownMenu.Item onClick={() => onSelectSort('desc')}>
+                      <span className='grow'>Sort descending</span>
+                      <span className='opacity-50'>
+                        <ArrowDown className={getSize(4)} />
+                      </span>
+                    </DropdownMenu.Item>
+                    {sortDirection !== false && (
+                      <DropdownMenu.Item onClick={onClearSort}>
+                        <span className='grow'>Clear sort</span>
+                        <span className='opacity-50'>
+                          <X className={getSize(4)} />
+                        </span>
+                      </DropdownMenu.Item>
+                    )}
+                  </>
+                )}
+                <DropdownMenu.Item onClick={onOpenColumnSettings}>
+                  <span className='grow'>Column settings</span>
+                  <span className='opacity-50'>
+                    <GearSix className={mx(getSize(4), 'rotate-90')} />
+                  </span>
+                </DropdownMenu.Item>
+              </DropdownMenu.Viewport>
+              <DropdownMenu.Arrow />
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
 
           <ColumnSettingsPanel {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
         </Popover.Root>

package/src/components/ColumnMenu/ColumnSettingsForm.tsx

@@ -1,7 +1,6 @@
 //
 // Copyright 2024 DXOS.org
 //
-
 import { Check, Trash, X } from '@phosphor-icons/react';
 import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
 
@@ -35,21 +34,25 @@ export const ColumnSettingsForm = ({
   onDelete,
   onClose,
 }: ColumnSettingsFormProps) => {
-  const [prop, setProp] = useState(column.id);
-  const [refTable, setRefTable] = useState(column.refTable);
-  const [refProp, setRefProp] = useState(column.refProp);
-  const [type, setType] = useState(String(column.type));
-  const [label, setLabel] = useState(column.label);
-  const [digits, setDigits] = useState(String(column.digits ?? '0'));
+  const [formState, setFormState] = useState({
+    prop: column.id,
+    refTable: column.refTable,
+    refProp: column.refProp,
+    type: String(column.type),
+    label: column.label,
+    digits: String(column.digits ?? '0'),
+  });
+
   const propRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation(translationKey);
 
   const handleCancel = () => {
-    setProp(column.id);
     onClose?.();
   };
 
   const handleSave = () => {
+    const { prop, refTable, refProp, type, label, digits } = formState;
+
     // Check valid.
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
       propRef.current?.focus();
@@ -58,7 +61,6 @@ export const ColumnSettingsForm = ({
 
     // If already exists then check same type.
     const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-
     if (current) {
       // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
       if (current.type !== 'ref' /* || current.ref !== refTable */) {
@@ -68,7 +70,7 @@ export const ColumnSettingsForm = ({
       }
     }
 
-    onUpdate?.(prop, {
+    onUpdate?.(column.id, {
       id: prop, // TODO(burdon): Make unique.
       prop,
       label,
@@ -77,7 +79,6 @@ export const ColumnSettingsForm = ({
       refProp,
       digits: safeParseInt(digits),
     });
-
     onClose?.();
   };
 
@@ -88,8 +89,8 @@ export const ColumnSettingsForm = ({
           <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
           <Input.TextInput
             placeholder='Column label'
-            value={label ?? ''}
-            onChange={(event) => setLabel(event.target.value)}
+            value={formState.label ?? ''}
+            onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
             autoFocus
           />
         </Input.Root>
@@ -98,14 +99,18 @@ export const ColumnSettingsForm = ({
           <Input.TextInput
             ref={propRef}
             placeholder='Property key'
-            // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
-            value={prop ?? ''}
-            onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
+            value={formState.prop ?? ''}
+            onChange={(event) =>
+              setFormState((prevState) => ({ ...prevState, prop: event.target.value.replace(/[^\w_]/g, '') }))
+            }
           />
         </Input.Root>
         <Input.Root>
           <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
-          <Select.Root value={type} onValueChange={setType}>
+          <Select.Root
+            value={formState.type}
+            onValueChange={(value) => setFormState((prevState) => ({ ...prevState, type: value }))}
+          >
             <Select.TriggerButton placeholder='Type' classNames='is-full' />
             <Select.Portal>
               <Select.Content>
@@ -121,35 +126,59 @@ export const ColumnSettingsForm = ({
           </Select.Root>
         </Input.Root>
       </Section>
-
-      {type === 'number' && (
-        <>
-          <Section>
-            <Input.Root>
-              <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
-              {/* TODO(burdon): Constrain input to numbers. */}
-              <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
-            </Input.Root>
-          </Section>
-        </>
+      {formState.type === 'number' && (
+        <Section>
+          <Input.Root>
+            <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
+            <Input.TextInput
+              value={formState.digits ?? ''}
+              onChange={(event) => setFormState((prevState) => ({ ...prevState, digits: event.target.value }))}
+            />
+          </Input.Root>
+        </Section>
       )}
 
-      {/* TODO(burdon): Selectors on same line. */}
-      {type === 'ref' && (
-        <>
-          <Section>
+      {formState.type === 'ref' && (
+        <Section>
+          <Input.Root>
+            <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
+            <Select.Root
+              value={formState.refTable}
+              onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refTable: value }))}
+            >
+              <Select.TriggerButton placeholder='Table' classNames='is-full' />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {tableDefs
+                      .filter((t) => t.id !== tableDef.id)
+                      .map(({ id, name }) => (
+                        <Select.Option key={id} value={id}>
+                          {name ?? id}
+                        </Select.Option>
+                      ))}
+                  </Select.Viewport>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </Input.Root>
+
+          {formState.refTable && (
             <Input.Root>
-              <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
-              <Select.Root value={refTable} onValueChange={setRefTable}>
-                <Select.TriggerButton placeholder='Table' classNames='is-full' />
+              <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+              <Select.Root
+                value={formState.refProp}
+                onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refProp: value }))}
+              >
+                <Select.TriggerButton placeholder='Property' classNames='is-full' />
                 <Select.Portal>
                   <Select.Content>
                     <Select.Viewport>
                       {tableDefs
-                        .filter((t) => t.id !== tableDef.id)
-                        .map(({ id, name }) => (
+                        .find((tableDef) => tableDef.id === formState.refTable)
+                        ?.columns.map(({ id, label }) => (
                           <Select.Option key={id} value={id}>
-                            {name ?? id}
+                            {label ?? id}
                           </Select.Option>
                         ))}
                     </Select.Viewport>
@@ -157,36 +186,13 @@ export const ColumnSettingsForm = ({
                 </Select.Portal>
               </Select.Root>
             </Input.Root>
-
-            {refTable && (
-              <Input.Root>
-                <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
-                <Select.Root value={refProp} onValueChange={setRefProp}>
-                  <Select.TriggerButton placeholder='Property' classNames='is-full' />
-                  <Select.Portal>
-                    <Select.Content>
-                      <Select.Viewport>
-                        {tableDefs
-                          .find((tableDef) => tableDef.id === refTable)
-                          ?.columns.map(({ id, label }) => (
-                            <Select.Option key={id} value={id}>
-                              {label ?? id}
-                            </Select.Option>
-                          ))}
-                      </Select.Viewport>
-                    </Select.Content>
-                  </Select.Portal>
-                </Select.Root>
-              </Input.Root>
-            )}
-          </Section>
-        </>
+          )}
+        </Section>
       )}
 
       <Separator classNames='mli-2' />
 
       <Section className='space-b-1.5'>
-        {/* TODO(burdon): Style as DropdownMenuItem. */}
         <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
           <span>{t('save label')}</span>
           <div className='grow' />