feat: introduce @fluentui-contrib/react-data-grid-react-window-grid

.github/CODEOWNERS

@@ -3,6 +3,7 @@ packages/react-chat/ @microsoft/teams-prg
 packages/react-data-grid-react-window/ @microsoft/teams-prg
 packages/react-shadow/ @microsoft/teams-prg
 packages/nx-plugin/ @microsoft/teams-prg
+packages/react-data-grid-react-window-grid/ @microsoft/ms-fabric
 
 #### Build/Infra
 /.github/ @microsoft/teams-prg

packages/react-data-grid-react-window-grid/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["stories/**/*.tsx", "stories/**/*.ts"],
+      "rules": {
+        "@nx/enforce-module-boundaries": "off"
+      }
+    }
+  ]
+}

packages/react-data-grid-react-window-grid/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@nx/react/plugins/storybook',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          injectStoryParameters: true,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+
+export default config;
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

packages/react-data-grid-react-window-grid/.storybook/preview.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { Preview } from '@storybook/react';
+
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <FluentProvider theme={webLightTheme}>
+        <Story />
+      </FluentProvider>
+    ),
+  ],
+};
+
+export default preview;

packages/react-data-grid-react-window-grid/.storybook/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": [
+    "../stories/**/*.stories.ts",
+    "../stories/**/*.stories.js",
+    "../stories/**/*.stories.jsx",
+    "../stories/**/*.stories.tsx",
+    "../stories/**/*.stories.mdx",
+    "*.ts",
+    "*.js"
+  ]
+}

packages/react-data-grid-react-window-grid/.swcrc

@@ -0,0 +1,30 @@
+{
+  "jsc": {
+    "target": "es2019",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$"
+  ],
+  "$schema": "https://json.schemastore.org/swcrc"
+}

packages/react-data-grid-react-window-grid/README.md

@@ -0,0 +1,28 @@
+# react-data-grid-react-window-grid
+
+A variant of the Fluent UI [DataGrid](https://react.fluentui.dev/?path=/docs/components-datagrid--default) that is
+virtualized 2 dimentionally using [react-window](https://react-window.vercel.app/#/examples/grid/fixed-size).
+
+## Building
+
+Run `nx build react-data-grid-react-window-grid` to build the library.
+
+## What is different from `react-data-grid-react-window`?
+
+- `react-data-grid-react-window` support vertical virtualization using FixedSizeList in react-window
+- `react-data-grid-react-window-grid` support 2 dimentional virtualization (including both horizontal and vertical) using FixedSizeGrid in react-window.
+- `react-data-grid-react-window-grid` has a virtualized header as well using FixedSizeList in react-window
+
+## `DataGridHeaderRow`
+
+Be aware of `DataGridHeaderRow` is a new component that does not has in fluentui v9 `DataGrid`, it is for supporting header virtualization. And be aware of there is no need to use `DataGridRow` in `react-data-grid-react-window-grid`, as for virtualized grid is using cell to render instead of using row.
+
+## Try it out
+
+```sh
+yarn add @fluentui-contrib/react-data-grid-react-window-grid
+
+npm install @fluentui-contrib/react-data-grid-react-window-grid
+```
+
+For a full usage example please take a look at [The documentation sample](https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-data-grid-react-window-grid/stories/DataGrid/VirtualizedDataGrid.stories.tsx).

packages/react-data-grid-react-window-grid/jest.config.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import { readFileSync } from 'fs';
+
+// Reading the SWC compilation config and remove the "exclude"
+// for the test files to be compiled by SWC
+const { exclude: _, ...swcJestConfig } = JSON.parse(
+  readFileSync(`${__dirname}/.swcrc`, 'utf-8')
+);
+
+// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
+// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
+if (swcJestConfig.swcrc === undefined) {
+  swcJestConfig.swcrc = false;
+}
+
+// Uncomment if using global setup/teardown files being transformed via swc
+// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries
+// jest needs EsModule Interop to find the default exported setup/teardown functions
+// swcJestConfig.module.noInterop = false;
+
+export default {
+  displayName: 'button',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': ['@swc/jest', swcJestConfig],
+  },
+  moduleFileExtensions: ['js', 'ts', 'tsx', 'html'],
+  coverageDirectory: '../../coverage/packages/button',
+};

packages/react-data-grid-react-window-grid/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@fluentui-contrib/react-data-grid-react-window-grid",
+  "version": "0.0.1",
+  "private": true,
+  "peerDependencies": {
+    "@fluentui/react-components": ">=9.30.0 <10.0.0",
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
+  },
+  "dependencies": {
+    "react-window": "^1.8.5"
+  }
+}

packages/react-data-grid-react-window-grid/project.json

@@ -0,0 +1,68 @@
+{
+  "name": "react-data-grid-react-window-grid",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react-data-grid-react-window-grid/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@fluentui-contrib/nx-plugin:build"
+    },
+    "publish": {
+      "command": "node tools/scripts/publish.mjs react-data-grid-react-window-grid {args.ver} {args.tag}",
+      "dependsOn": ["build"]
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/react-data-grid-react-window-grid/**/*.ts",
+          "packages/react-data-grid-react-window-grid/**/*.tsx"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/react-data-grid-react-window-grid/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "type-check": {
+      "executor": "@fluentui-contrib/nx-plugin:type-check"
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/react-data-grid-react-window-grid/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/react-data-grid-react-window-grid",
+        "configDir": "packages/react-data-grid-react-window-grid/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

packages/react-data-grid-react-window-grid/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useDataGrid_unstable } from './useDataGrid';
+import {
+  renderDataGrid_unstable,
+  useDataGridStyles_unstable,
+  useDataGridContextValues_unstable,
+  DataGridProps,
+} from '@fluentui/react-components';
+import { HeaderListRefContextProvider } from '../../contexts/headerListRefContext';
+import { FixedSizeGrid, FixedSizeList } from 'react-window';
+import { BodyRefContextProvider } from '../../contexts/bodyRefContext';
+
+export const DataGrid = React.forwardRef<HTMLDivElement, DataGridProps>(
+  (props, ref) => {
+    const headerRef = React.useRef<FixedSizeList>(null);
+    const bodyRef = React.useRef<FixedSizeGrid>(null);
+    const state = useDataGrid_unstable(props, ref);
+
+    useDataGridStyles_unstable(state);
+    return (
+      <HeaderListRefContextProvider value={headerRef}>
+        <BodyRefContextProvider value={bodyRef}>
+          {renderDataGrid_unstable(
+            state,
+            useDataGridContextValues_unstable(state)
+          )}
+        </BodyRefContextProvider>
+      </HeaderListRefContextProvider>
+    );
+  }
+);
+
+DataGrid.displayName = 'DataGrid';

packages/react-data-grid-react-window-grid/src/components/DataGrid/index.ts

@@ -0,0 +1,2 @@
+export * from './DataGrid';
+export * from './useDataGrid';

packages/react-data-grid-react-window-grid/src/components/DataGrid/useDataGrid.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {
+  useDataGrid_unstable as useBaseState,
+  DataGridProps,
+  DataGridState,
+} from '@fluentui/react-components';
+import { useFluent, useScrollbarWidth } from '@fluentui/react-components';
+
+const TABLE_SELECTION_CELL_WIDTH = 44;
+
+/**
+ * Create the state required to render DataGrid.
+ *
+ * The returned state can be modified with hooks such as useDataGridStyles_unstable,
+ * before being passed to renderDataGrid_unstable.
+ *
+ * @param props - props from this instance of DataGrid
+ * @param ref - reference to root HTMLElement of DataGrid
+ */
+export const useDataGrid_unstable = (
+  props: DataGridProps,
+  ref: React.Ref<HTMLElement>
+): DataGridState => {
+  const { targetDocument } = useFluent();
+  const scrollbarWidth = useScrollbarWidth({ targetDocument });
+
+  let containerWidthOffset = props.containerWidthOffset;
+
+  if (containerWidthOffset === undefined) {
+    containerWidthOffset = props.selectionMode
+      ? -TABLE_SELECTION_CELL_WIDTH
+      : 0;
+    containerWidthOffset -= scrollbarWidth || 0;
+  }
+
+  return useBaseState(
+    { ...props, 'aria-rowcount': props.items.length, containerWidthOffset },
+    ref
+  );
+};

packages/react-data-grid-react-window-grid/src/components/DataGridBody/DataGridBody.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-components';
+import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
+import { useDataGridBody_unstable } from './useDataGridBody';
+import { renderDataGridBody_unstable } from './renderDataGridBody';
+import type { DataGridBodyProps } from './DataGridBody.types';
+
+/**
+ * DataGridBody component
+ */
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef(
+  (props, ref) => {
+    const state = useDataGridBody_unstable(props, ref);
+
+    useDataGridBodyStyles_unstable(state);
+    return renderDataGridBody_unstable(state);
+  }
+) as ForwardRefComponent<DataGridBodyProps> &
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
+
+DataGridBody.displayName = 'DataGridBody';