@dxos/react-ui-table 0.6.7-staging.e9eb1ed → 0.6.8-main.046e6cf

package/src/components/Table/TableBody.tsx

@@ -41,6 +41,7 @@ const TableBody = ({ rows }: TableBodyProps) => {
             key={keyAccessor ? keyAccessor(row.original) : row.id}
             className={classNames}
             data-index={row.index}
+            data-testid={'table.data-row'}
             ref={virtualizer.measureElement}
             {...(isCurrent && { 'aria-current': 'location' })}
             {...(isSelected && { 'aria-selected': 'true' })}
@@ -61,7 +62,7 @@ const TableBody = ({ rows }: TableBodyProps) => {
             {row.getVisibleCells().map((cell) => {
               return (
                 <Cell key={cell.id} cell={cell}>
-                  {flexRender(cell.column.columnDef.cell, { className: 'pli-2', ...cell.getContext() })}
+                  {flexRender(cell.column.columnDef.cell, { ...cell.getContext() })}
                 </Cell>
               );
             })}

package/src/components/Table/TableContext.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type RowData } from '@tanstack/react-table';
-import React, { useContext, createContext, type ReactNode, type FC, type Context } from 'react';
+import React, { useContext, createContext, type JSX, type ReactNode, type FC, type Context } from 'react';
 
 import { type TableContextValue } from './props';
 

package/src/components/Table/TableHead.tsx

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
 import { flexRender } from '@tanstack/react-table';
@@ -37,10 +37,9 @@ const TableHead = (_props: TableHeadProps) => {
               return (
                 <th
                   key={header.id}
-                  style={{
-                    width: header.getSize(),
-                  }}
+                  style={{ width: header.getSize() }}
                   className={theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)}
+                  data-testid='table.header-cell'
                 >
                   {!header || header.isPlaceholder
                     ? null

package/src/components/Table/props.ts

@@ -13,7 +13,6 @@ export type TableFlags = Partial<{
   role: 'table' | 'grid' | 'treegrid';
   grouping: string[];
   header: boolean;
-  footer: boolean;
   border: boolean;
   fullWidth: boolean;
   debug: boolean;

package/src/helpers.tsx

@@ -144,6 +144,7 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
         onBlur={handleSave}
         onChange={(event) => setValue(event.target.value)}
         onKeyDown={(event) => (event.key === 'Enter' && handleSave()) || (event.key === 'Escape' && handleCancel())}
+        autoComplete='off'
       />
     </Input.Root>
   );
@@ -208,6 +209,7 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
           // TODO(thure): `Escape` is reserved for blurring the input and moving focus to the cell
           return /* (event.key === 'Escape' && handleCancel()) || */ event.key === 'Enter' && handleSave();
         }}
+        autoComplete='off'
       />
     </Input.Root>
   );

package/src/hooks/usePinLastRow.ts

@@ -5,22 +5,9 @@
 import { type Row, type Table } from '@tanstack/react-table';
 import { useCallback, useEffect, useState } from 'react';
 
-import { useTableRootContext } from '../components';
-
 export const usePinLastRow = (pinLastRow: boolean | undefined, table: Table<any>, data: any[]) => {
-  const { scrollContextRef } = useTableRootContext();
   const [pinnedRowKey, setPinnedRowKey] = useState<string>();
 
-  // Scrolls to the bottom of a scrollable element.
-  const scrollToBottom = useCallback(() => {
-    const element = scrollContextRef.current;
-    const scrollHeight = element?.scrollHeight;
-
-    if (element && scrollHeight) {
-      requestAnimationFrame(() => element.scrollTo({ top: scrollHeight }));
-    }
-  }, []);
-
   const pinRow = useCallback(
     (rowToPin: Row<any>) => {
       table.resetRowPinning();
@@ -49,11 +36,7 @@ export const usePinLastRow = (pinLastRow: boolean | undefined, table: Table<any>
     }
 
     pinRow(lastRow);
-
-    if (pinnedRowKey !== undefined) {
-      scrollToBottom();
-    }
-  }, [table, scrollToBottom, pinnedRowKey]);
+  }, [table, pinnedRowKey]);
 
   // Effect to handle pinning logic when data changes.
   useEffect(() => {

package/src/theme.ts

@@ -1,10 +1,8 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-import { type CellContext } from '@tanstack/react-table';
-
-import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx } from '@dxos/react-ui-theme';
+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';
@@ -12,46 +10,36 @@ 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';
-
-export const gridCellFocusRing = 'focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400';
+export const textPadding = 'pli-2 plb-0';
+export const headPadding = 'pli-2 plb-0';
 
-//
-// table
-//
+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', fullWidth && 'is-full', ...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);
 
-//
-// thead
-//
-
 export type TheadStyleProps = Partial<TableFlags>;
 
 export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header, stickyHeader }, ...etc) =>
-  mx(
-    header ? stickyHeader && 'sticky block-start-[--sticky-top] z-[1]' : 'collapse',
-    header && 'base-surface',
-    'drop-shadow-sm',
-    ...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 font-medium select-none truncate',
+    'text-start text-xs select-none truncate',
     headPadding,
-    border && groupBorder,
-    border && 'border border-t-0 border-b-0 border-neutral-200',
+    border && borderColors,
+    border && 'border-t border-b border-l last:border-r',
     ...etc,
   );
 
@@ -61,16 +49,12 @@ export const theadResizeRoot: ComponentFunction<{ isResizing: boolean }> = ({ is
     'cursor-col-resize',
     'user-select-none',
     'touch-action-none',
-    !isResizing && 'group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800',
     'pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800',
-    isResizing && 'bg-primary-500 dark:bg-primary-400',
+    !isResizing && 'group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800',
+    isResizing && 'bg-primary-500',
   );
 };
 
-//
-// tbody
-//
-
 export type TbodyStyleProps = Partial<TableContextValue<any>>;
 export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
 
@@ -80,30 +64,19 @@ export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent, is
     'group',
     canBeCurrent ? ghostSelectedCurrent : ghostSelected,
     canBeCurrent && focusRing,
-    canBeCurrent && 'cursor-pointer rounded',
-    isPinned && 'sticky z-1 bottom-[-1px] base-surface',
+    canBeCurrent && 'cursor-pointer',
+    isPinned && 'sticky z-1 block-end-0',
+    isPinned && stickyRowColors,
     ...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', modalSurface, ...etc);
-
-export const tfootTr: ComponentFunction<TfootStyleProps> = (_props, ...etc) => mx(...etc);
-
-export const tfootTh: ComponentFunction<TfootStyleProps> = ({ border }, ...etc) =>
-  mx(textPadding, modalSurface, border && groupBorder, ...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/dist/types/src/components/Table/TableFooter.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-type TableFooterProps = {};
-declare const TableFooter: {
-    (props: TableFooterProps): JSX.Element;
-    displayName: string;
-};
-export { TableFooter };
-export type { TableFooterProps };
-//# sourceMappingURL=TableFooter.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableFooter.tsx"],"names":[],"mappings":";AAUA,KAAK,gBAAgB,GAAG,EAAE,CAAC;AAI3B,QAAA,MAAM,WAAW;YAAW,gBAAgB;;CAwB3C,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/src/components/Table/TableFooter.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { flexRender } from '@tanstack/react-table';
-import React from 'react';
-
-import { useTableContext } from './TableContext';
-import { tfootRoot, tfootTr, tfootTh } from '../../theme';
-
-type TableFooterProps = {};
-
-const TABLE_FOOT_NAME = 'TableFooter';
-
-const TableFooter = (props: TableFooterProps) => {
-  const tableContext = useTableContext();
-  const { table, expand, debug } = tableContext;
-  const footers = table.getFooterGroups();
-
-  return (
-    <tfoot className={tfootRoot(props)}>
-      {footers.map((footerGroup) => (
-        <tr key={footerGroup.id} className={tfootTr(tableContext)}>
-          {debug && <th />}
-
-          {footerGroup.headers.map((footer) => {
-            return (
-              <th key={footer.id} className={tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)}>
-                {footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext())}
-              </th>
-            );
-          })}
-
-          {expand && <th />}
-        </tr>
-      ))}
-    </tfoot>
-  );
-};
-
-TableFooter.displayName = TABLE_FOOT_NAME;
-
-export { TableFooter };
-
-export type { TableFooterProps };