Merge remote-tracking branch 'origin/master' into feat/horizontal-layout

.cursorignore

@@ -0,0 +1,8 @@
+# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
+node_modules
+/www/dataserver/data
+.next
+.env.local
+dist
+out
+.contentlayer

examples/src/pages/tests/datasource/sortinfo-controlled.spec.ts

@@ -20,6 +20,7 @@ export default test.describe.parallel('DataSource', () => {
         id: persons[0].id,
         indexInAll: 0,
         rowSelected: false,
+        rowDisabled: false,
         isGroupRow: false,
         selfLoaded: true,
         dataSourceHasGrouping: false,
@@ -29,6 +30,7 @@ export default test.describe.parallel('DataSource', () => {
         id: persons[1].id,
         indexInAll: 1,
         rowSelected: false,
+        rowDisabled: false,
         isGroupRow: false,
         selfLoaded: true,
         dataSourceHasGrouping: false,
@@ -54,6 +56,7 @@ export default test.describe.parallel('DataSource', () => {
         dataSourceHasGrouping: false,
         indexInAll: 0,
         rowSelected: false,
+        rowDisabled: false,
         // indexInGroup: 0,
         isGroupRow: false,
         selfLoaded: true,
@@ -63,6 +66,7 @@ export default test.describe.parallel('DataSource', () => {
         data: persons[1],
         indexInAll: 1,
         rowSelected: false,
+        rowDisabled: false,
         // indexInGroup: 1,
         id: persons[1].id,
         isGroupRow: false,

examples/src/pages/tests/table/props/active-row-index/default.page.tsx

@@ -55,6 +55,7 @@ export default function KeyboardNavigationForRows() {
         defaultActiveRowIndex={99}
         keyboardNavigation="row"
         domProps={{
+          autoFocus: true,
           style: {
             height: 800,
           },

examples/src/pages/tests/table/props/active-row-index/small-grid-one-col.page.tsx

@@ -0,0 +1,93 @@
+import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
+
+import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
+import * as React from 'react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+
+  email: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+};
+const dataSource: Developer[] = [
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    country: 'USA',
+    city: 'New York',
+    currency: '$',
+    email: '[email protected]',
+    preferredLanguage: 'JavaScript',
+    stack: 'frontend',
+    canDesign: 'yes',
+    hobby: 'Coding',
+    salary: 50000,
+    age: 30,
+  },
+  {
+    id: 2,
+    firstName: 'Jane',
+    lastName: 'Doe',
+    country: 'USA',
+    city: 'San Francisco',
+    currency: '$',
+    email: '[email protected]',
+    preferredLanguage: 'Ruby',
+    stack: 'backend',
+    canDesign: 'no',
+    hobby: 'Photography',
+    salary: 60000,
+    age: 35,
+  },
+  {
+    id: 3,
+    firstName: 'Bob',
+    lastName: 'Doe',
+    country: 'Canada',
+    city: 'Toronto',
+    currency: '$',
+    email: '[email protected]',
+    preferredLanguage: 'Ruby',
+    stack: 'frontend',
+    canDesign: 'no',
+    hobby: 'Photography',
+    salary: 40000,
+    age: 28,
+  },
+];
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  firstName: { field: 'firstName', defaultFlex: 1 },
+};
+
+export default function KeyboardNavigationForRows() {
+  return (
+    <DataSource<Developer> primaryKey="id" data={dataSource}>
+      <InfiniteTable<Developer>
+        columns={columns}
+        keyboardNavigation="row"
+        defaultActiveRowIndex={2}
+        rowHeight={40}
+        columnDefaultWidth={120}
+        header={false}
+        domProps={{
+          style: {
+            width: '80vw',
+            minHeight: 120,
+          },
+        }}
+      />
+    </DataSource>
+  );
+}

examples/src/pages/tests/table/props/active-row-index/small-grid.page.tsx

@@ -0,0 +1,96 @@
+import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
+
+import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
+import * as React from 'react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+
+  email: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+};
+const dataSource: Developer[] = [
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    country: 'USA',
+    city: 'New York',
+    currency: '$',
+    email: '[email protected]',
+    preferredLanguage: 'JavaScript',
+    stack: 'frontend',
+    canDesign: 'yes',
+    hobby: 'Coding',
+    salary: 50000,
+    age: 30,
+  },
+  {
+    id: 2,
+    firstName: 'Jane',
+    lastName: 'Doe',
+    country: 'USA',
+    city: 'San Francisco',
+    currency: '$',
+    email: '[email protected]',
+    preferredLanguage: 'Ruby',
+    stack: 'backend',
+    canDesign: 'no',
+    hobby: 'Photography',
+    salary: 60000,
+    age: 35,
+  },
+  {
+    id: 3,
+    firstName: 'Bob',
+    lastName: 'Doe',
+    country: 'Canada',
+    city: 'Toronto',
+    currency: '$',
+    email: '[email protected]',
+    preferredLanguage: 'Ruby',
+    stack: 'frontend',
+    canDesign: 'no',
+    hobby: 'Photography',
+    salary: 40000,
+    age: 28,
+  },
+];
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  preferredLanguage: { field: 'preferredLanguage' },
+  country: { field: 'country' },
+  firstName: { field: 'firstName' },
+  id: { field: 'id' },
+};
+
+export default function KeyboardNavigationForRows() {
+  return (
+    <DataSource<Developer> primaryKey="id" data={dataSource}>
+      <InfiniteTable<Developer>
+        columns={columns}
+        keyboardNavigation="row"
+        defaultActiveRowIndex={2}
+        rowHeight={40}
+        columnDefaultWidth={120}
+        header={false}
+        domProps={{
+          style: {
+            width: 800,
+            minHeight: 120,
+          },
+        }}
+      />
+    </DataSource>
+  );
+}

examples/src/pages/tests/table/props/active-row-index/small-grid.spec.ts

@@ -0,0 +1,26 @@
+import { getScrollerLocator } from '@examples/pages/tests/testUtils';
+
+import { test, expect } from '@testing';
+
+export default test.describe('No scrollbar grid', () => {
+  test('should not have scrollbars induced by the active row index selector', async ({
+    page,
+  }) => {
+    await page.waitForInfinite();
+    const scroller = await getScrollerLocator({ page });
+
+    const { scrollWidth, scrollHeight, offsetWidth } = await scroller.evaluate(
+      (node) => {
+        return {
+          scrollWidth: (node as HTMLElement).scrollWidth,
+          scrollHeight: (node as HTMLElement).scrollHeight,
+          offsetWidth: (node as HTMLElement).offsetWidth,
+        };
+      },
+    );
+
+    expect(scrollHeight).toEqual(120);
+    expect(scrollWidth).toEqual(800);
+    expect(offsetWidth).toEqual(800);
+  });
+});

examples/src/pages/tests/table/props/active-row-index/with-disabled-controlled.page.tsx

@@ -0,0 +1,114 @@
+import {
+  InfiniteTable,
+  DataSource,
+  DataSourceData,
+  type InfiniteTablePropColumns,
+  DataSourceApi,
+  RowDisabledStateObject,
+} from '@infinite-table/infinite-react';
+
+import * as React from 'react';
+import { useState } from 'react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+
+  email: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+};
+
+const dataSource: DataSourceData<Developer> = ({}) => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers10-sql`)
+    .then((r) => r.json())
+    .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  preferredLanguage: { field: 'preferredLanguage' },
+  id: { field: 'id' },
+  country: { field: 'country' },
+  salary: {
+    field: 'salary',
+    type: 'number',
+  },
+  age: { field: 'age' },
+  canDesign: { field: 'canDesign' },
+  firstName: { field: 'firstName' },
+  stack: { field: 'stack' },
+
+  hobby: { field: 'hobby' },
+  city: { field: 'city' },
+  currency: { field: 'currency' },
+};
+
+export default function KeyboardNavigationForRows() {
+  const [activeRowIndex, setActiveRowIndex] = useState(0);
+
+  const [rowDisabledState, setRowDisabledState] =
+    useState<RowDisabledStateObject>({
+      enabledRows: true,
+      disabledRows: [3, 5, 6],
+    });
+
+  const [dataSourceApi, setDataSourceApi] =
+    useState<DataSourceApi<Developer>>();
+
+  (globalThis as any).activeRowIndex = activeRowIndex;
+  return (
+    <>
+      <div style={{ marginBottom: '10px' }}>
+        <button onClick={() => dataSourceApi?.disableAllRows()}>
+          Disable All Rows
+        </button>
+        <button
+          onClick={() => dataSourceApi?.enableAllRows()}
+          style={{ marginLeft: '10px' }}
+        >
+          Enable All Rows
+        </button>
+        <button
+          onClick={() => {
+            if (dataSourceApi) {
+              const isRowDisabled = dataSourceApi.isRowDisabled(1);
+              dataSourceApi.setRowEnabledAt(1, isRowDisabled);
+            }
+          }}
+          style={{ marginLeft: '10px' }}
+        >
+          Toggle Row 1
+        </button>
+      </div>
+      <DataSource<Developer>
+        onReady={setDataSourceApi}
+        primaryKey="id"
+        data={dataSource}
+        selectionMode="multi-row"
+        rowDisabledState={rowDisabledState}
+        onRowDisabledStateChange={(s) => setRowDisabledState(s.getState())}
+      >
+        <InfiniteTable<Developer>
+          columns={columns}
+          activeRowIndex={activeRowIndex}
+          onActiveRowIndexChange={setActiveRowIndex}
+          keyboardNavigation="row"
+          domProps={{
+            autoFocus: true,
+            style: {
+              height: 800,
+            },
+          }}
+        />
+      </DataSource>
+    </>
+  );
+}