@dxos/react-ui-table 0.4.9 → 0.4.10-main.05b9ab6

package/dist/types/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,eAAO,MAAM,UAAU,wCAAwC,CAAC;AAChE,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAEzC,eAAO,MAAM,iBAAiB,oGACqE,CAAC;AAMpG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACN,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAMrD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAMtD,CAAC;AAEJ,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAQpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAUtE,CAAC;AAMF,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAOtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAE/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAkC,CAAC;AAMlG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACJ,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACO,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,eAAO,MAAM,UAAU,wCAAwC,CAAC;AAChE,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAEzC,eAAO,MAAM,iBAAiB,oGACqE,CAAC;AAMpG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACN,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAMrD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAMtD,CAAC;AAEJ,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAQpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAUtE,CAAC;AAMF,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACxF,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAQtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAE/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAkC,CAAC;AAMlG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACJ,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.4.9",
+  "version": "0.4.10-main.05b9ab6",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,34 +16,40 @@
     "src"
   ],
   "dependencies": {
+    "@effect/schema": "0.64.7",
     "@fluentui/react-tabster": "^9.19.0",
     "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-primitive": "^1.0.2",
+    "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "@tanstack/react-table": "^8.13.2",
     "@tanstack/react-virtual": "^3.0.1",
     "date-fns": "^3.3.1",
-    "@dxos/async": "0.4.9",
-    "@dxos/keys": "0.4.9",
-    "@dxos/log": "0.4.9",
-    "@dxos/invariant": "0.4.9",
-    "@dxos/react-ui": "0.4.9",
-    "@dxos/react-ui-searchlist": "0.4.9",
-    "@dxos/react-ui-theme": "0.4.9",
-    "@dxos/react-ui-types": "0.4.9",
-    "@dxos/util": "0.4.9"
+    "effect": "2.4.9",
+    "@dxos/async": "0.4.10-main.05b9ab6",
+    "@dxos/invariant": "0.4.10-main.05b9ab6",
+    "@dxos/log": "0.4.10-main.05b9ab6",
+    "@dxos/keys": "0.4.10-main.05b9ab6",
+    "@dxos/react-ui": "0.4.10-main.05b9ab6",
+    "@dxos/react-ui-theme": "0.4.10-main.05b9ab6",
+    "@dxos/react-ui-types": "0.4.10-main.05b9ab6",
+    "@dxos/util": "0.4.10-main.05b9ab6",
+    "@dxos/react-ui-searchlist": "0.4.10-main.05b9ab6"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.0.5",
+    "@phosphor-icons/react": "^2.1.5",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "fast-check": "^3.15.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^5.1.5",
+    "vite": "^5.2.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/echo-schema": "0.4.9",
-    "@dxos/random": "0.4.9",
-    "@dxos/react-ui-theme": "0.4.9",
-    "@dxos/storybook-utils": "0.4.9"
+    "@dxos/echo-schema": "0.4.10-main.05b9ab6",
+    "@dxos/echo-signals": "0.4.10-main.05b9ab6",
+    "@dxos/random": "0.4.10-main.05b9ab6",
+    "@dxos/react-ui-theme": "0.4.10-main.05b9ab6",
+    "@dxos/storybook-utils": "0.4.10-main.05b9ab6"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/ColumnMenu/ColumnMenu.stories.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { type SortDirection } from '@tanstack/react-table';
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ColumnMenu } from './ColumnMenu';
+import { type ColumnSettingsFormProps } from './ColumnSettingsForm';
+import { type ColumnProps } from '../../schema';
+
+export default {
+  title: 'react-ui-table/ColumnMenu',
+  component: ColumnMenu,
+  decorators: [withTheme],
+};
+
+const defs: Pick<ColumnSettingsFormProps, 'tableDef' | 'tableDefs'> = {
+  tableDef: {
+    id: '1',
+    name: 'table 1',
+    columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
+  },
+  tableDefs: [
+    {
+      id: '1',
+      name: 'table 1',
+      columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
+    },
+    {
+      id: '2',
+      name: 'table 2',
+      columns: [{ id: 'col-1', prop: 'two-foo', type: 'string' }],
+    },
+  ],
+};
+
+const funcs: Pick<ColumnSettingsFormProps, 'onUpdate' | 'onDelete'> = {
+  onUpdate: (...args: any) => console.log('onUpdate args', args),
+  onDelete: (...args: any) => console.log('onDelete args', args),
+};
+
+export const Default = {
+  args: {
+    column: {
+      id: 'test',
+      label: 'test',
+    } as ColumnProps,
+
+    ...defs,
+    ...funcs,
+
+    context: {
+      header: {
+        column: {
+          getCanSort: () => true,
+          toggleSorting: (desc?: boolean) => {
+            console.log('toggleSorting', { desc });
+          },
+          getToggleSortingHandler: () => () => {
+            console.log('Sorting handler invoked');
+          },
+          getIsSorted: () => false,
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story: any) => (
+      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const ReactiveSort = {
+  render: () => {
+    const [sort, setSort] = React.useState<SortDirection | false>(false);
+    const props = {
+      column: {
+        id: 'test',
+        label: 'test',
+      } as ColumnProps,
+      context: {
+        header: {
+          column: {
+            getCanSort: () => true,
+            toggleSorting: (desc?: boolean) => {
+              if (desc === undefined) {
+                setSort(false);
+              } else if (desc) {
+                setSort('desc');
+              } else {
+                setSort('asc');
+              }
+            },
+            getIsSorted: () => sort,
+            clearSorting: () => setSort(false),
+            getToggleSortingHandler: () => () => {
+              if (sort === 'asc') {
+                setSort('desc');
+              } else {
+                setSort(false);
+              }
+            },
+          },
+        },
+      },
+    } as any;
+
+    return (
+      <div className='flex justify-around w-full overflow-hidden'>
+        <div className='grid w-48'>
+          <ColumnMenu {...props} />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/ColumnMenu/ColumnMenu.tsx

@@ -0,0 +1,168 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { X, GearSix, CaretDown, ArrowDown, ArrowUp } from '@phosphor-icons/react';
+import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
+import React, { useRef, useState, useCallback } from 'react';
+
+import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { ColumnSettingsForm } from './ColumnSettingsForm';
+import { useColumnSorting } from '../../hooks';
+import { type TableDef, type ColumnProps } from '../../schema';
+
+export type ColumnMenuProps<TData extends RowData, TValue> = {
+  context: HeaderContext<TData, TValue>;
+  tableDefs: TableDef[];
+  tableDef: TableDef;
+  column: ColumnProps;
+  onUpdate?: (id: string, column: ColumnProps) => void;
+  onDelete?: (id: string) => void;
+};
+
+export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
+  const title = column.label?.length ? column.label : column.id;
+  const header = props.context.header;
+
+  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
+
+  const columnSettingsAnchorRef = useRef<any>(null);
+
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState(false);
+
+  const shouldPreventFocusOnClose = useRef(false);
+
+  const onOpenColumnSettings = useCallback(() => {
+    shouldPreventFocusOnClose.current = true;
+    setIsColumnSettingsOpen(true);
+  }, [shouldPreventFocusOnClose, setIsColumnSettingsOpen]); // setIsColumnSettingsOpen is a dependency
+
+  const onDropdownCloseAutoFocus = useCallback(
+    (event: Event) => {
+      if (shouldPreventFocusOnClose.current) {
+        event.preventDefault();
+        shouldPreventFocusOnClose.current = false;
+      }
+    },
+    [shouldPreventFocusOnClose],
+  );
+
+  return (
+    <div className='flex items-center justify-center justify-between'>
+      <div className='flex items-center gap-1 truncate' title={title}>
+        <SortIndicator direction={sortDirection} onClick={onToggleSort} />
+        <div className='truncate'>{title}</div>
+      </div>
+
+      <DropdownMenu.Root modal={false}>
+        <Popover.Root open={isColumnSettingsOpen} onOpenChange={setIsColumnSettingsOpen} modal={false}>
+          <DropdownMenu.Trigger ref={columnSettingsAnchorRef} asChild>
+            <Popover.Anchor asChild>
+              <Button variant='ghost'>
+                <CaretDown className={getSize(4)} />
+              </Button>
+            </Popover.Anchor>
+          </DropdownMenu.Trigger>
+
+          <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'>
+                        <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>
+                        <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>
+      </DropdownMenu.Root>
+    </div>
+  );
+};
+
+export const ColumnSettingsPanel = <TData extends RowData, TValue>({
+  tableDefs,
+  tableDef,
+  column,
+  onUpdate,
+  onDelete,
+  onClose,
+}: ColumnMenuProps<TData, TValue> & { onClose: () => void }) => (
+  <Popover.Portal>
+    <Popover.Content>
+      <Popover.Viewport classNames='w-60'>
+        <DensityProvider density='fine'>
+          <ColumnSettingsForm
+            column={column}
+            tableDefs={tableDefs}
+            tableDef={tableDef}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+            onClose={onClose}
+          />
+        </DensityProvider>
+      </Popover.Viewport>
+      <Popover.Arrow />
+    </Popover.Content>
+  </Popover.Portal>
+);
+
+export const SortIndicator = ({
+  direction,
+  onClick,
+}: {
+  direction: SortDirection | false;
+  onClick: (e: any) => void;
+}) => {
+  if (direction === false) {
+    return null;
+  }
+
+  let icon;
+
+  switch (direction) {
+    case 'asc':
+      icon = <ArrowUp className={getSize(3)} />;
+      break;
+    case 'desc':
+      icon = <ArrowDown className={getSize(3)} />;
+      break;
+  }
+
+  return (
+    <div onClick={onClick} className='flex items-center cursor-pointer'>
+      {icon}
+    </div>
+  );
+};

package/src/components/ColumnMenu/ColumnSettingsForm.tsx

@@ -0,0 +1,214 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { Check, Trash, X } from '@phosphor-icons/react';
+import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+
+import { Button, Input, Select, Separator, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import { type TableDef, type ColumnProps, type ColumnType } from '../../schema';
+import { translationKey } from '../../translations';
+
+const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
+  <div role='none' className={mx('p-2', className)}>
+    {children}
+  </div>
+);
+
+export type ColumnSettingsFormProps = {
+  column: ColumnProps;
+  tableDef: TableDef;
+  tableDefs: TableDef[];
+  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
+  onDelete?: ((id: string) => void) | undefined;
+  onClose?: () => void;
+};
+
+export const ColumnSettingsForm = ({
+  column,
+  tableDef,
+  tableDefs,
+  onUpdate,
+  onDelete,
+  onClose,
+}: ColumnSettingsFormProps) => {
+  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 = () => {
+    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();
+      return;
+    }
+
+    // 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 */) {
+        // TODO(burdon): Show error.
+        propRef.current?.focus();
+        return;
+      }
+    }
+
+    onUpdate?.(column.id, {
+      id: prop, // TODO(burdon): Make unique.
+      prop,
+      label,
+      type: type as ColumnProps['type'],
+      refTable,
+      refProp,
+      digits: safeParseInt(digits),
+    });
+    onClose?.();
+  };
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <Section>
+        <Input.Root>
+          <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
+          <Input.TextInput
+            placeholder='Column label'
+            value={formState.label ?? ''}
+            onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
+            autoFocus
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
+          <Input.TextInput
+            ref={propRef}
+            placeholder='Property key'
+            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={formState.type}
+            onValueChange={(value) => setFormState((prevState) => ({ ...prevState, type: value }))}
+          >
+            <Select.TriggerButton placeholder='Type' classNames='is-full' />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
+                    <Select.Option key={type} value={type}>
+                      {t(`${type} column type label`)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </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>
+      )}
+
+      {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 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
+                        .find((tableDef) => tableDef.id === formState.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>
+      )}
+
+      <Separator classNames='mli-2' />
+
+      <Section className='space-b-1.5'>
+        <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
+          <span>{t('save label')}</span>
+          <div className='grow' />
+          <Check className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={handleCancel}>
+          <span>{t('cancel label', { ns: 'os' })}</span>
+          <div className='grow' />
+          <X className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
+          <span>{t('delete label')}</span>
+          <div className='grow' />
+          <Trash className={getSize(5)} />
+        </Button>
+      </Section>
+    </div>
+  );
+};

package/src/components/ColumnMenu/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './ColumnMenu';
+export * from './ColumnSettingsForm';