@dxos/react-ui-table 0.3.8-next.a5a9bfc → 0.3.8

package/src/theme.ts

@@ -2,66 +2,98 @@
 // Copyright 2023 DXOS.org
 //
 
-import { chromeSurface } from '@dxos/react-ui-theme';
-
-// TODO(burdon): Remove nested classNames? Add to theme?
-export type TableSlots = {
-  root?: {
-    className?: string | string[];
-  };
-  table?: {
-    className?: string | string[];
-  };
-  header?: {
-    className?: string | string[];
-  };
-  footer?: {
-    className?: string | string[];
-  };
-  group?: {
-    className?: string | string[];
-  };
-  row?: {
-    className?: string | string[];
-  };
-  cell?: {
-    className?: string | string[];
-  };
-  focus?: {
-    className?: string | string[];
-  };
-  selected?: {
-    className?: string | string[];
-  };
-  margin?: {
-    className?: string | string[];
-  };
-};
-
-// TODO(burdon): Change to groups.
-/*
-head: {
-  default:
-  cell:
-}
-row: {
-  default: '',
-  selected: ''
-}
-*/
-
-// TODO(burdon): Scrollbar area.
-// TODO(burdon): Overscroll horizontal (full width).
-
-// TODO(burdon): Integrate with DXOS UI theme (direct dependency -- see react-ui-editor, tailwind.ts).
-//  See Link.tsx const { tx } = useThemeContext();
-//  Reuse button fragments for hoverColors, selected, primary, etc.
-export const defaultTableSlots: TableSlots = {
-  // TODO(burdon): head/body/table rows.
-  header: { className: [chromeSurface, 'px-2 font-light select-none'] },
-  footer: { className: [chromeSurface, 'px-2 font-light'] },
-  cell: { className: 'px-2' },
-  group: { className: 'px-2 font-light text-xs text-left' },
-  focus: { className: 'ring ring-primary-600 ring-inset' },
-  selected: { className: '!bg-teal-100 dark:!bg-teal-700' },
-};
+import { type CellContext } from '@tanstack/react-table';
+
+import { chromeSurface, fixedSurface, focusRing, groupBorder, hoverColors, 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.5';
+export const headPadding = 'pli-2 plb-1.5';
+
+export const gridCellFocusRing = 'focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400';
+
+//
+// table
+//
+
+export type TableStyleProps = Partial<TableContextValue<any>>;
+
+export const tableRoot: ComponentFunction<TableStyleProps> = ({ fullWidth }, ...etc) =>
+  mx('table-fixed', fullWidth && 'is-full', ...etc);
+
+export const groupTh: ComponentFunction<TableStyleProps> = (_props, ...etc) =>
+  mx('text-start font-medium', flushPadding, ...etc);
+
+//
+// thead
+//
+
+export type TheadStyleProps = Partial<TableFlags>;
+
+export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header }, ...etc) =>
+  mx(header ? 'sticky block-start-0 z-10' : 'collapse', header && fixedSurface, ...etc);
+
+export const theadTr: ComponentFunction<TheadStyleProps> = (_props, ...etc) => mx('group', ...etc);
+
+export const theadTh: ComponentFunction<TheadStyleProps> = ({ border }, ...etc) =>
+  mx(
+    'relative text-start font-medium select-none truncate',
+    headPadding,
+    border && 'border',
+    border && groupBorder,
+    ...etc,
+  );
+
+export const theadResizeRoot: ComponentFunction<TheadStyleProps> = (_props, ...etc) =>
+  mx(
+    'absolute top-0 pis-1 h-full z-[10] w-[7px] -right-[5px] cursor-col-resize select-none touch-none opacity-20 hover:opacity-100',
+    ...etc,
+  );
+
+export const theadResizeThumb: ComponentFunction<TheadStyleProps> = (_props, ...etc) =>
+  mx('flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full', ...etc);
+
+//
+// tbody
+//
+
+export type TbodyStyleProps = Partial<TableContextValue<any>>;
+export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
+
+export type TbodyTrStyleProps = Partial<{ isSelected?: boolean; isCurrent?: boolean; canBeCurrent?: boolean }>;
+export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ isSelected, isCurrent, canBeCurrent }, ...etc) =>
+  mx(
+    'group',
+    isSelected ? selectedRow : isCurrent && currentRow,
+    canBeCurrent && focusRing,
+    canBeCurrent && hoverColors,
+    canBeCurrent && 'cursor-pointer rounded',
+    ...etc,
+  );
+
+//
+// td, th
+//
+
+export const tdRoot: ComponentFunction<TbodyStyleProps> = ({ border, isGrid }, ...etc) =>
+  mx('relative', flushPadding, border && 'border', border && groupBorder, isGrid && gridCellFocusRing, ...etc);
+export const tdContent: ComponentFunction<CellContext<any, any>> = (_props, ...etc) => mx(...etc);
+
+//
+// tfoot
+//
+
+export type TfootStyleProps = Partial<TableContextValue<any>>;
+
+export const tfootRoot: ComponentFunction<TfootStyleProps> = (_props, ...etc) =>
+  mx('sticky block-end-0 z-10', chromeSurface, ...etc);
+
+export const tfootTr: ComponentFunction<TfootStyleProps> = (_props, ...etc) => mx(...etc);
+
+export const tfootTh: ComponentFunction<TfootStyleProps> = ({ border }, ...etc) =>
+  mx(textPadding, chromeSurface, border && groupBorder, ...etc);

package/src/types.ts

@@ -4,6 +4,10 @@
 
 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.
@@ -14,16 +18,17 @@ declare module '@tanstack/react-table' {
   interface ColumnMeta<TData extends RowData, TValue> {
     expand?: boolean;
     resizable?: boolean;
-    slots?: {
-      header?: {
-        className?: string;
-      };
-      footer?: {
-        className?: string;
-      };
-      cell?: {
-        className?: string;
-      };
+    model?: SearchListQueryModel<TData>;
+    onUpdate?: ValueUpdater<TData, any>;
+    digits?: number;
+    header?: {
+      classNames?: ClassNameValue;
+    };
+    footer?: {
+      classNames?: ClassNameValue;
+    };
+    cell?: {
+      classNames?: ClassNameValue;
     };
   }
 }

package/dist/types/src/components/ComboboxCell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboboxCell.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboboxCell.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAOrD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,OAAO,IAAI,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAStG,eAAO,MAAM,YAAY;;;qCAOU,IAAI;iBAiEtC,CAAC"}

package/dist/types/src/components/Table.d.ts

@@ -1,29 +0,0 @@
-import { type RowData, type RowSelectionState, type VisibilityState } from '@tanstack/react-table';
-import { type TableSlots } from '../theme';
-import { type TableColumnDef, type KeyValue } from '../types';
-export type TableSelection<TData extends RowData> = {
-    select?: 'single' | 'single-toggle' | 'multiple' | 'multiple-toggle' | undefined;
-    selected?: TData[];
-    onSelectedChange?: (selected: TData[] | undefined) => void;
-};
-/**
- * Util to update the selection based on the mode.
- */
-export declare const updateSelection: (selectionState: RowSelectionState, id: string, selection: TableSelection<any>['select']) => RowSelectionState;
-export type TableProps<TData extends RowData> = {
-    keyAccessor?: KeyValue<TData>;
-    data?: TData[];
-    columns?: TableColumnDef<TData>[];
-    columnVisibility?: VisibilityState;
-    onColumnResize?: (state: Record<string, number>) => void;
-    grouping?: string[];
-    header?: boolean;
-    footer?: boolean;
-    border?: boolean;
-    fullWidth?: boolean;
-    pinToBottom?: boolean;
-    slots?: TableSlots;
-    debug?: boolean;
-} & TableSelection<TData>;
-export declare const Table: <TData extends unknown>({ slots, ...props }: TableProps<TData>) => JSX.Element;
-//# sourceMappingURL=Table.d.ts.map

package/dist/types/src/components/Table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table.tsx"],"names":[],"mappings":"AAIA,OAAO,EAUL,KAAK,OAAO,EACZ,KAAK,iBAAiB,EAEtB,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAM9D,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,OAAO,IAAI;IAElD,MAAM,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,mBACV,iBAAiB,MAC7B,MAAM,aACC,eAAe,GAAG,CAAC,CAAC,QAAQ,CAAC,KACvC,iBAmCF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IAAI;IAC9C,WAAW,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,eAAe,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAO,MAAM,KAAK,gFAkMjB,CAAC"}

package/dist/types/src/components/Table.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;4BAgGsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAyChB,GAAG;;AA7Cf,wBAmDE;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,OAAO;;CA8BnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAmBpB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAwBrB,CAAC"}