@dxos/react-ui-table 0.4.10-main.b1e8dec → 0.4.10-main.b30eb88

package/src/components/Table/Table.tsx

@@ -1,33 +1,29 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-  type ColumnSizingInfoState,
   type GroupingState,
   type RowData,
-  type ColumnSizingState,
-  type OnChangeFn,
-  type RowSelectionState,
   getGroupedRowModel,
   getExpandedRowModel,
+  type Row,
 } from '@tanstack/react-table';
 import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { useDefaultValue, useOnTransition } from '@dxos/react-ui';
+import { useDefaultValue } from '@dxos/react-ui';
 
 import { TableBody } from './TableBody';
 import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTableContext } from './TableContext';
 import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { type TableProps } from './props';
+import { useColumnResizing, usePinLastRow, useRowSelection } from '../../hooks';
 import { groupTh, tableRoot } from '../../theme';
-import { usePinLastRow } from '../hooks/usePinLastRow';
 
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
@@ -43,57 +39,22 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   } = props;
 
   const columns = useDefaultValue(props.columns, []);
-  const data = useDefaultValue(props.data, []);
+  const incomingData = useDefaultValue(props.data, []);
 
-  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
-
-  const [columnsInitialised, setColumnsInitialised] = useState(false);
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
-
-  useEffect(() => {
-    if (columnsInitialised) {
-      return;
-    }
-
-    setColumnSizing(
-      columns
-        .filter((column) => !!column.size && (column as any).prop !== undefined)
-        .reduce<ColumnSizingState>((state, column) => {
-          state[(column as any).prop] = column.size!;
-          return state;
-        }, {}),
-    );
-
-    setColumnsInitialised(true);
-  }, [columns, setColumnSizing]);
+  const [data, setData] = useState([...incomingData]);
 
-  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
+  // Reactivity workaround: https://github.com/dxos/dxos/issues/6376.
+  const forceUpdate = useCallback(() => setData([...incomingData]), [incomingData]);
+  useEffect(() => forceUpdate(), [JSON.stringify(incomingData), forceUpdate]);
 
-  // Notify on column resize.
-  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
 
-  const [rowSelection = {}, setRowSelection] = useControllableState({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection,
+  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
+    columns,
+    onColumnResize,
   });
 
-  // 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 (rowsSelectable === 'multi') {
-        setRowSelection(nextRowSelection);
-      } else if (rowsSelectable) {
-        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-        setRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
-      } else {
-        setRowSelection({});
-      }
-    },
-    [rowsSelectable, setRowSelection, rowSelection],
-  );
+  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
 
   const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
   useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
@@ -177,12 +138,7 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
  */
 const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
-  const { table } = useTableContext();
-
-  const centerRows = table.getCenterRows();
-  const bottomRows = table.getBottomRows();
-
-  const rows = [...centerRows, ...bottomRows];
+  const { table } = useTableContext<TData>();
 
   if (debug) {
     return (
@@ -211,7 +167,7 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
             <VirtualizedTableContent getScrollElement={getScrollElement} />
           )
         ) : (
-          <TableBody rows={rows} />
+          <UnvirtualizedTableContent />
         )
       ) : (
         <GroupedTableContent />
@@ -222,13 +178,32 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   );
 };
 
+const UnvirtualizedTableContent = () => {
+  const { table } = useTableContext();
+
+  const centerRows = table.getCenterRows();
+  const pinnedRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...pinnedRows];
+
+  return <TableBody rows={rows} />;
+};
+
 const VirtualizedTableContent = ({
   getScrollElement,
 }: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
   const { table } = useTableContext();
 
   const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
+  let pinnedRows = [] as Row<unknown>[];
+
+  try {
+    // TODO(zan): Work out how to sync the row pinning with rendering
+    // This is a hack because the first call to this function after a row is deleted will throw an error
+    // because the row index is no longer in the table
+    // The pin last row hook updates the pinned row key after the row is deleted
+    pinnedRows = table.getBottomRows();
+  } catch (_) {} // Ignore error
 
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,

package/src/components/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Cell';
 export * from './ColumnMenu';
 export * from './Table';
-export * from './Cell';

package/src/helpers.tsx

@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import { format } from 'date-fns/format';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
@@ -102,14 +102,16 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
 
   // https://tanstack.com/table/v8/docs/examples/react/editable-data
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState(() => {
+
+  const getInitialValue = useCallback(() => {
     // TODO(burdon): Temporary shim for automerge.
-    if ((initialValue as any)?.content) {
-      return (initialValue as any)?.content;
-    }
+    return (initialValue as any)?.content ?? initialValue;
+  }, [initialValue]);
+
+  const [value, setValue] = useState(getInitialValue);
 
-    return initialValue;
-  });
+  // Update value if initialValue changes externally (cell reactivity).
+  useEffect(() => setValue(getInitialValue()), [getInitialValue]);
 
   const handleSave = () => {
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useColumnSizing';
+export * from './useColumnSorting';
+export * from './usePinLastRow';
+export * from './useRowSelection';

package/src/hooks/useColumnSizing.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { type ColumnSizingInfoState, type ColumnSizingState } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useOnTransition } from '@dxos/react-ui';
+
+import { type TableColumnDef } from '../components/Table';
+
+export const useColumnResizing = ({
+  columns,
+  onColumnResize,
+}: {
+  columns: TableColumnDef<any>[];
+  onColumnResize: ((state: Record<string, number>) => void) | undefined;
+}) => {
+  const [columnsInitialised, setColumnsInitialised] = useState(false);
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+
+  useEffect(() => {
+    if (columnsInitialised) {
+      return;
+    }
+
+    setColumnSizing(
+      columns
+        .filter((column) => !!column.size && (column as any).prop !== undefined)
+        .reduce<ColumnSizingState>((state, column) => {
+          state[(column as any).prop] = column.size!;
+          return state;
+        }, {}),
+    );
+
+    setColumnsInitialised(true);
+  }, [columns, setColumnSizing]);
+
+  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
+
+  // Notify on column resize.
+  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
+  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
+
+  return { columnSizing, columnSizingInfo, setColumnSizing, setColumnSizingInfo };
+};

package/src/hooks/usePinLastRow.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Row, type Table } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+
+export const usePinLastRow = (
+  pinLastRow: boolean | undefined,
+  table: Table<any>,
+  data: any[],
+  getScrollElement?: () => Element | null,
+) => {
+  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
+
+  // Scrolls to the bottom of a scrollable element.
+  const scrollToBottom = useCallback(() => {
+    const scrollElement = getScrollElement?.();
+    if (scrollElement) {
+      requestAnimationFrame(() => scrollElement.scrollTo({ top: scrollElement.scrollHeight }));
+    }
+  }, [getScrollElement]);
+
+  const pinRow = useCallback(
+    (rowToPin: Row<any>) => {
+      table.resetRowPinning();
+      rowToPin.pin('bottom');
+      setPinnedRowKey(rowToPin.id);
+    },
+    [table],
+  );
+
+  const clearRowPinning = useCallback(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(undefined);
+  }, [table]);
+
+  // Define the logic for pinning the last row in a callback.
+  const pinLastRowCallback = useCallback(() => {
+    const rows = table.getRowModel().rows;
+
+    if (rows.length === 0) {
+      return clearRowPinning();
+    }
+
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
+      return;
+    }
+
+    pinRow(lastRow);
+
+    if (pinnedRowKey !== undefined) {
+      scrollToBottom();
+    }
+  }, [table, scrollToBottom, pinnedRowKey]);
+
+  // Effect to handle pinning logic when data changes.
+  useEffect(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [data, pinLastRow, pinLastRowCallback]);
+};

package/src/hooks/useRowSelection.ts

@@ -0,0 +1,39 @@
+//
+// 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/index.ts

@@ -2,9 +2,11 @@
 // 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 { default as translations } from './translations';
 export * from './types';

package/src/{components/schema → schema}/SchemaToTable.stories.tsx

@@ -5,15 +5,15 @@
 import '@dxosTheme';
 
 import * as Arbitrary from '@effect/schema/Arbitrary';
-import * as S from '@effect/schema/Schema';
 import * as fc from 'fast-check';
 import React, { useRef } from 'react';
 
+import { S } from '@dxos/echo-schema';
 import { DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { schemaToColumnDefs } from './schemaToColumns';
-import { Table } from '../Table/Table';
+import { Table } from '../components';
 
 export default {
   title: 'react-ui-table/SchemaTable',

package/src/schema/index.ts

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

package/src/{components/schema → schema}/schema.test.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as S from '@effect/schema/Schema';
 import { expect } from 'chai';
 
+import { S } from '@dxos/echo-schema';
 import { describe, test } from '@dxos/test';
 
 import { classifySchemaProperties } from './schema';

package/src/{components/schema → schema}/schema.ts

@@ -2,26 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { AST } from '@effect/schema';
+import * as AST from '@effect/schema/AST';
 import type * as S from '@effect/schema/Schema';
 
-import { type ColumnType } from '../../schema';
+import { type ColumnType } from './types';
 
 export type ClassifiedColumnType = ColumnType | 'display';
 
+// TODO(burdon): Rename getX? and return typed array?
+export const classifySchemaProperties = (schema: S.Schema<any, any>): [string, ClassifiedColumnType][] => {
+  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
+    const properties = AST.getPropertySignatures(node);
+    properties.forEach((prop) => {
+      const propName = prop.name.toString();
+
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [...path, propName], acc);
+        }
+      }
+
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [...path, propName], acc);
+      } else {
+        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
+      }
+    });
+
+    return acc;
+  };
+
+  return recurse(schema.ast, [], []);
+};
+
+const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
+
 const isOptionalUnion = (prop: AST.PropertySignature) => AST.isUnion(prop.type) && prop.isOptional;
 
 const unwrapOptionProperty = (prop: AST.PropertySignature) => {
   if (!isOptionalUnion(prop)) {
-    throw new Error('Not an optional property');
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
   }
 
   if (!AST.isUnion(prop.type)) {
-    throw new Error('Not a union type');
+    throw new Error(`Not a union type: ${String(prop.name)}`);
   }
 
   const [type, _undefinedCase] = prop.type.types;
-
   return type;
 };
 
@@ -44,7 +72,6 @@ const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
 
   if (AST.isTransform(type)) {
     const identifier = AST.getIdentifierAnnotation(type);
-
     if (identifier._tag === 'Some') {
       if (identifier.value === 'DateFromString') {
         return 'date';
@@ -55,42 +82,11 @@ const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
   return 'display';
 };
 
-const propertyToColumn = (property: AST.PropertySignature): ClassifiedColumnType => {
-  let type = property.type;
-
-  if (property.isOptional) {
-    type = unwrapOptionProperty(property);
+const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
   }
 
   return typeToColumn(type);
 };
-
-const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
-
-export const classifySchemaProperties = (schema: S.Schema<any, any>) => {
-  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
-    const properties = AST.getPropertySignatures(node);
-
-    properties.forEach((prop) => {
-      const propName = prop.name.toString();
-
-      if (prop.isOptional) {
-        const unwrappedAst = unwrapOptionProperty(prop);
-
-        if (isStruct(unwrappedAst)) {
-          return recurse(unwrappedAst, [...path, propName], acc);
-        }
-      }
-
-      if (isStruct(prop.type)) {
-        recurse(prop.type, [...path, propName], acc);
-      } else {
-        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
-      }
-    });
-
-    return acc;
-  };
-
-  return recurse(schema.ast, [], []);
-};

package/src/{components/schema → schema}/schemaToColumns.ts

@@ -2,22 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as S from '@effect/schema/Schema';
 import { type ColumnDef } from '@tanstack/react-table';
 
+import type { S } from '@dxos/echo-schema';
+
 import { classifySchemaProperties } from './schema';
-import { createColumnBuilder } from '../../helpers';
+import { createColumnBuilder } from '../helpers';
 
 export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
-  const classified = classifySchemaProperties(schema);
-
   const { helper, builder } = createColumnBuilder<T>();
 
+  const classified = classifySchemaProperties(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
 
     let column: Partial<ColumnDef<any, any>> | undefined;
-
     switch (type) {
       case 'string': {
         column = builder.string({ label: propertyKey });
@@ -39,10 +38,9 @@ export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, an
         column = builder.display({ label: propertyKey, id: propertyKey });
         break;
       }
-    }
-
-    if (column === undefined) {
-      throw new Error(`Unhandled column type: ${type}`);
+      default: {
+        throw new Error(`Unhandled column type: ${type}`);
+      }
     }
 
     return helper.accessor(propertyKey as any, column);

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQ7F,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAE5D,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI;IAC3D,OAAO,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,sGAqFtB,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAOe,MAAM,IAAI;iBAkBxD,CAAC;AAEF,eAAO,MAAM,aAAa;eAIb,aAAa,GAAG,KAAK;iBACnB,GAAG,KAAK,IAAI;wBAsB1B,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAQpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;;;;;;AAE7C,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;;2CAUa,OAAO;;;;;;;yBAY5B,GAAG;;;;CASd,CAAC;AAEF,eAAO,MAAM,YAAY;;CA2CxB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnSettingsForm.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnSettingsForm.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,WAAW,CAAC;AAS7E,eAAO,MAAM,kBAAkB;YAQrB,WAAW;cACT,QAAQ;eACP,QAAQ,EAAE;qBACJ,MAAM,UAAU,WAAW,KAAK,IAAI;qBACpC,MAAM,KAAK,IAAI;aACvB,MAAM,IAAI;iBA4KpB,CAAC"}

package/dist/types/src/components/hooks/useColumnSorting.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnSorting.d.ts","sourceRoot":"","sources":["../../../../../src/components/hooks/useColumnSorting.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxE,eAAO,MAAM,gBAAgB,WAAY,OAAO,GAAG,CAAC;;;8BAoCjB,aAAa;;;CAU/C,CAAC"}

package/dist/types/src/components/hooks/usePinLastRow.d.ts

@@ -1,3 +0,0 @@
-import { type Table } from '@tanstack/react-table';
-export declare const usePinLastRow: (pinLastRow: boolean | undefined, table: Table<any>, data: any, getScrollElement?: () => Element | null) => void;
-//# sourceMappingURL=usePinLastRow.d.ts.map

package/dist/types/src/components/hooks/usePinLastRow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePinLastRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/hooks/usePinLastRow.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGnD,eAAO,MAAM,aAAa,eACZ,OAAO,GAAG,SAAS,SACxB,MAAM,GAAG,CAAC,QACX,GAAG,qBACU,MAAM,OAAO,GAAG,IAAI,SA+BxC,CAAC"}

package/dist/types/src/components/schema/SchemaToTable.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SchemaToTable.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/schema/SchemaToTable.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;AAapB,wBAWE;AAuBF,eAAO,MAAM,WAAW;;CAoBvB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../../src/components/schema/schema.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;AA4D1D,eAAO,MAAM,wBAAwB,WAAY,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,qCA0BlE,CAAC"}

package/dist/types/src/components/schema/schema.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"schema.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/schema/schema.test.ts"],"names":[],"mappings":""}

package/dist/types/src/components/schema/schemaToColumns.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"schemaToColumns.d.ts","sourceRoot":"","sources":["../../../../../src/components/schema/schemaToColumns.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKvD,eAAO,MAAM,kBAAkB,6DAuC9B,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/src/components/hooks/usePinLastRow.ts

@@ -1,43 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Table } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
-
-export const usePinLastRow = (
-  pinLastRow: boolean | undefined,
-  table: Table<any>,
-  data: any,
-  getScrollElement?: () => Element | null,
-) => {
-  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
-
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
-    }
-
-    const rows = table.getRowModel().rows;
-    const rowToPin = rows[rows.length - 1];
-    const rowId = rowToPin.id;
-
-    if (rowId === pinnedRowKey) {
-      return;
-    }
-
-    table.resetRowPinning();
-    rowToPin.pin('bottom');
-
-    const scrollElement = getScrollElement?.();
-    const isFirstRender = pinnedRowKey === undefined;
-
-    if (scrollElement && !isFirstRender) {
-      requestAnimationFrame(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight });
-      });
-    }
-
-    setPinnedRowKey(rowId);
-  }, [pinLastRow, table, getScrollElement, pinnedRowKey, setPinnedRowKey, data]);
-};