@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/src/deprecated/hooks/useRowSelection.ts

@@ -1,40 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { type OnChangeFn, type RowSelectionState } from '@tanstack/react-table';
-import { useCallback } from 'react';
-
-import { type TableProps } from '../components/Table';
-
-export const useRowSelection = (
-  props: Pick<
-    TableProps<any>,
-    'rowsSelectable' | 'defaultRowSelection' | 'rowSelection' | 'onRowSelectionChange' | 'rowsSelectable'
-  >,
-) => {
-  const [rowSelection = {}, setRowSelection] = useControllableState({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection,
-  });
-
-  // TODO(thure): Does @tanstack/react-table really need this intervention? It did seem necessary to enforce single-selection...
-  const handleRowSelectionChange = useCallback<OnChangeFn<RowSelectionState>>(
-    (updaterOrValue) => {
-      const nextRowSelection = typeof updaterOrValue === 'function' ? updaterOrValue(rowSelection) : updaterOrValue;
-      if (props.rowsSelectable === 'multi') {
-        setRowSelection(nextRowSelection);
-      } else if (props.rowsSelectable) {
-        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-        setRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
-      } else {
-        setRowSelection({});
-      }
-    },
-    [props.rowsSelectable, setRowSelection, rowSelection],
-  );
-
-  return { rowSelection, handleRowSelectionChange };
-};

package/src/deprecated/index.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export { default as translations } from './translations';
-
-export * from './components';
-export * from './helpers';
-export * from './hooks';
-export * from './schema';
-export * from './theme';
-export * from './types';

package/src/deprecated/schema/Schema.stories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { Arbitrary } from 'effect';
-import * as fc from 'fast-check';
-import React from 'react';
-
-import { S } from '@dxos/echo-schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { schemaToColumnDefs } from './column-utils';
-import { Table } from '../components';
-
-export default {
-  title: 'ui/react-ui-table/deprecated/Schema',
-  decorators: [withTheme, withLayout()],
-};
-
-const TestSchema = S.Struct({
-  field1: S.String,
-  field2: S.Number,
-  field3: S.Date,
-  field4: S.optional(S.String.pipe(S.length(10))),
-  field5: S.optional(
-    S.Struct({
-      innerField1: S.String,
-      innerField2: S.Number,
-    }),
-  ),
-});
-
-type TestType = S.Schema.Type<typeof TestSchema>;
-
-const columns = schemaToColumnDefs(TestSchema);
-const items = fc.sample(Arbitrary.make(TestSchema), 10);
-
-export const Default = {
-  render: () => {
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<TestType>
-            role='grid'
-            rowsSelectable='multi'
-            keyAccessor={(row) => JSON.stringify(row)}
-            columns={columns}
-            data={items}
-            fullWidth
-            stickyHeader
-            border
-          />
-        </Table.Viewport>
-      </Table.Root>
-    );
-  },
-};

package/src/deprecated/schema/column-utils.ts

@@ -1,54 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type ColumnDef } from '@tanstack/react-table';
-
-import { TypeEnum, type S } from '@dxos/echo-schema';
-import { FormatEnum } from '@dxos/echo-schema';
-import { mapSchemaToFields } from '@dxos/schema';
-
-import { createColumnBuilder } from '../helpers';
-
-/**
- * @deprecated
- */
-export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
-  const { helper, builder } = createColumnBuilder<T>();
-
-  return mapSchemaToFields(schema).map(({ property, type, format }) => {
-    const propertyKey = property.toString();
-
-    if (!format) {
-      switch (type) {
-        case TypeEnum.String: {
-          return helper.accessor(
-            propertyKey as any,
-            builder.string({ label: propertyKey, classNames: [property === 'id' && 'font-mono'] }),
-          );
-        }
-        case TypeEnum.Number: {
-          return helper.accessor(propertyKey as any, builder.number({ label: propertyKey }));
-        }
-        case TypeEnum.Boolean: {
-          return helper.accessor(propertyKey as any, builder.switch({ label: propertyKey }));
-        }
-        default: {
-          throw new Error(`Unhandled scalar type: ${type}`);
-        }
-      }
-    }
-
-    switch (format) {
-      case FormatEnum.Date: {
-        return helper.accessor(propertyKey as any, builder.date({ label: propertyKey }));
-      }
-      case FormatEnum.JSON: {
-        return helper.accessor(propertyKey as any, builder.json({ label: propertyKey, id: propertyKey }));
-      }
-      default: {
-        throw new Error(`Unhandled format: ${format}`);
-      }
-    }
-  });
-};

package/src/deprecated/schema/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './column-utils';
-export * from './types';

package/src/deprecated/schema/types.ts

@@ -1,40 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type TypeEnum, type FormatEnum } from '@dxos/echo-schema';
-
-/**
- * @deprecated
- */
-// TODO(burdon): Reconcile with @dxos/schema/View.
-export type TableDef = {
-  id: string;
-  name?: string;
-  columns: ColumnDef[];
-};
-
-/**
- * @deprecated
- */
-// TODO(burdon): Reconcile with @dxos/schema/Field.
-export type ColumnDef = {
-  id: string;
-  prop: string;
-  type: TypeEnum;
-  format?: FormatEnum;
-  size?: number;
-  label?: string;
-
-  // type = number
-  digits?: number;
-
-  // type = ref
-  refTable?: string;
-  refProp?: string;
-
-  // TODO(burdon): Move to meta.
-  fixed?: boolean;
-  editable?: boolean;
-  resizable?: boolean;
-};

package/src/deprecated/theme.ts

@@ -1,82 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { focusRing, ghostSelected, ghostSelectedCurrent, mx } from '@dxos/react-ui-theme';
-import { type ComponentFunction } from '@dxos/react-ui-types';
-
-import { type TableContextValue, type TableFlags } from './components';
-
-export const currentRow = '!bg-neutral-75 !dark:bg-neutral-850';
-export const selectedRow = '!bg-primary-100 dark:!bg-primary-700';
-export const flushPadding = 'pli-0 plb-0';
-export const textPadding = 'pli-2 plb-0';
-export const headPadding = 'pli-2 plb-0';
-
-export const gridCellFocusRing =
-  'relative focus-within:outline focus-within:outline-1 outline-primary-500 outline-offset-[-1px]';
-const borderColors = 'border-neutral-200 dark:border-neutral-700';
-const stickyRowColors = 'bg-neutral-50  dark:bg-neutral-800';
-
-export type TableStyleProps = Partial<TableContextValue<any>>;
-
-export const tableRoot: ComponentFunction<TableStyleProps> = ({ fullWidth }, ...etc) =>
-  mx('table-fixed', 'text-neutral-800 dark:text-neutral-200', fullWidth && 'is-full', ...etc);
-
-export const groupTh: ComponentFunction<TableStyleProps> = (_props, ...etc) =>
-  mx('text-start font-medium', flushPadding, ...etc);
-
-export type TheadStyleProps = Partial<TableFlags>;
-
-export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header, stickyHeader }, ...etc) =>
-  mx(header ? stickyHeader && 'sticky block-start-[--sticky-top] z-[1]' : 'collapse', stickyRowColors, ...etc);
-
-export const theadTr: ComponentFunction<TheadStyleProps> = (_props, ...etc) => mx('group', ...etc);
-
-export const theadTh: ComponentFunction<TheadStyleProps> = ({ border }, ...etc) =>
-  mx(
-    'relative',
-    'text-start text-xs select-none truncate',
-    headPadding,
-    border && borderColors,
-    border && 'border-t border-b border-l last:border-r',
-    ...etc,
-  );
-
-export const theadResizeRoot: ComponentFunction<{ isResizing: boolean }> = ({ isResizing }) => {
-  return mx(
-    'absolute h-full w-[4px] top-0 right-0',
-    'cursor-col-resize',
-    'user-select-none',
-    'touch-action-none',
-    'pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800',
-    !isResizing && 'group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800',
-    isResizing && 'bg-primary-500',
-  );
-};
-
-export type TbodyStyleProps = Partial<TableContextValue<any>>;
-export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
-
-export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean; isPinned?: boolean }>;
-export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent, isPinned }, ...etc) =>
-  mx(
-    'group',
-    canBeCurrent ? ghostSelectedCurrent : ghostSelected,
-    canBeCurrent && focusRing,
-    canBeCurrent && 'cursor-pointer',
-    isPinned && 'sticky z-1 block-end-0',
-    isPinned && stickyRowColors,
-    ...etc,
-  );
-
-export const tdRoot: ComponentFunction<TbodyStyleProps & { pinned?: boolean }> = ({ border, isGrid, pinned }, ...etc) =>
-  mx(
-    'relative',
-    'focus-within:!bg-neutral-50 dark:focus-within:!bg-neutral-900',
-    flushPadding,
-    border && 'border-b border-l last:border-r border-neutral-200 dark:border-neutral-700',
-    pinned && 'border-t',
-    isGrid && gridCellFocusRing,
-    ...etc,
-  );

package/src/deprecated/translations.ts

@@ -1,26 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const translationKey = 'table';
-
-export default [
-  {
-    'en-US': {
-      [translationKey]: {
-        'no selection label': ' ',
-        'number column type label': 'Number',
-        'boolean column type label': 'Boolean',
-        'date column type label': 'Date',
-        'string column type label': 'Text',
-        'ref column type label': 'Reference',
-        'digits label': 'Decimal places',
-        'save label': 'Save',
-        'delete label': 'Delete',
-        'column label label': 'Label',
-        'property key label': 'Property',
-        'column type label': 'Type',
-      },
-    },
-  },
-];

package/src/deprecated/types.ts

@@ -1,38 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ColumnDef, type RowData } from '@tanstack/react-table';
-
-import { type ClassNameValue } from '@dxos/react-ui-types';
-
-import { type SearchListQueryModel, type ValueUpdater } from './helpers';
-
-// Define custom meta definitions.
-declare module '@tanstack/react-table' {
-  // Access via table.options.meta.
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  interface TableMeta<TData extends RowData> {}
-
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    expand?: boolean;
-    resizable?: boolean;
-    model?: SearchListQueryModel<TData>;
-    onUpdate?: ValueUpdater<TData, any>;
-    digits?: number;
-    header?: {
-      classNames?: ClassNameValue;
-    };
-    footer?: {
-      classNames?: ClassNameValue;
-    };
-    cell?: {
-      classNames?: ClassNameValue;
-    };
-  }
-}
-
-export type KeyValue<TData extends RowData> = (row: TData) => string;
-
-export type TableColumnDef<TData extends RowData, TValue = any> = ColumnDef<TData, TValue>;