LG-4146: Table refactor

packages/hooks/src/index.ts

@@ -9,6 +9,7 @@ export { useForceRerender } from './useForceRerender';
 export { useForwardedRef, useObservedRef } from './useForwardedRef';
 export { default as useIdAllocator } from './useIdAllocator';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useMergeRefs } from './useMergeRefs';
 export { default as useMutationObserver } from './useMutationObserver';
 export { default as useObjectDependency } from './useObjectDependency';
 export { default as usePoller } from './usePoller';

packages/hooks/src/useMergeRefs/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Copied from https://github.com/gregberge/react-merge-refs
+ * @param refs
+ * @returns
+ */
+
+export default function useMergeRefs<T = any>(
+  refs: Array<
+    React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null
+  >,
+): React.RefCallback<T> {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}

packages/hooks/src/useMergeRefs/useMergeRefs.spec.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import useMergeRefs from '.';
+
+test('useMergeRefs', () => {
+  const TestForwardRefComponent = React.forwardRef(
+    function TestForwardRefComponent(_, ref) {
+      React.useImperativeHandle(ref, () => 'refValue');
+      return null;
+    },
+  );
+  const refAsFunc = jest.fn();
+  const refAsObj1 = { current: undefined };
+  const refAsObj2 = { current: undefined };
+
+  const Example: React.FC = () => {
+    return (
+      <TestForwardRefComponent
+        ref={useMergeRefs([refAsObj1, refAsObj2, refAsFunc])}
+      />
+    );
+  };
+
+  render(<Example />);
+  expect(refAsFunc).toHaveBeenCalledTimes(1);
+  expect(refAsFunc).toHaveBeenCalledWith('refValue');
+  expect(refAsObj1.current).toBe('refValue');
+  expect(refAsObj2.current).toBe('refValue');
+});
+
+test('useMergeRefs with undefined and null refs', () => {
+  const TestForwardRefComponent = React.forwardRef(
+    function TestForwardRefComponent(_, ref) {
+      React.useImperativeHandle(ref, () => 'refValue');
+      return null;
+    },
+  );
+  const refAsFunc = jest.fn();
+  const refAsObj = { current: undefined };
+
+  const Example: React.FC = () => {
+    return (
+      <TestForwardRefComponent
+        ref={useMergeRefs([null, undefined, refAsFunc, refAsObj])}
+      />
+    );
+  };
+
+  render(<Example />);
+  expect(refAsFunc).toHaveBeenCalledTimes(1);
+  expect(refAsFunc).toHaveBeenCalledWith('refValue');
+  expect(refAsObj.current).toBe('refValue');
+});

packages/lib/src/index.ts

@@ -15,6 +15,7 @@ export type {
   PartialRequired,
   RecursiveRecord,
   ValuesOf,
+  GenericMemo,
 } from './types';
 
 export { typeIs, createUniqueClassName, getNodeTextContent, getTheme, Theme };

packages/lib/src/types/GenericMemo.types.ts

@@ -0,0 +1,20 @@
+/**
+ * Constructs a type which provides generic typing for React.memo
+ */
+
+import { PropsWithoutRef, WeakValidationMap } from 'react';
+
+export interface GenericMemo {
+  <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
+    component: T,
+    propsAreEqual?: (
+      prevProps: React.ComponentPropsWithRef<T>,
+      nextProps: React.ComponentPropsWithRef<T>,
+    ) => boolean,
+  ): T & {
+    displayName?: string;
+    propTypes?:
+      | WeakValidationMap<PropsWithoutRef<React.ComponentPropsWithRef<T>>>
+      | undefined;
+  };
+}

packages/lib/src/types/index.ts

@@ -5,3 +5,4 @@ export type { Optional } from './Optional.types';
 export type { PartialRequired } from './PartialRequired.types';
 export type { RecursiveRecord } from './RecursiveRecord.types';
 export type { ValuesOf } from './ValuesOf.types';
+export type { GenericMemo } from './GenericMemo.types';

packages/table/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @leafygreen-ui/table
 
+## 13.0.0-beta.1
+
+### Patch Changes
+
+- Add `react-keyed-flatten-children` to fix install error
+
+## 13.0.0-beta.0
+
+### Major Changes
+
+- First beta pre-release of Table v13. This release is a WIP and should not be used in production.
+
 ## 12.7.0
 
 ### Minor Changes

packages/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/table",
-  "version": "12.7.0",
+  "version": "12.7.0-test.10",
   "description": "leafyGreen UI Kit Table",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -33,12 +33,12 @@
     "@leafygreen-ui/tokens": "^2.11.0",
     "@leafygreen-ui/typography": "^19.2.0",
     "@lg-tools/test-harnesses": "^0.1.2",
-    "@tanstack/react-table": "^8.13.2",
+    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.10.7",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "react-keyed-flatten-children": "^1.3.0",
-    "react-transition-group": "^4.4.5",
-    "react-virtual": "^2.10.4"
+    "react-fast-compare": "3.2.2",
+    "react-intersection-observer":"^8.25.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.0",

packages/table/src/Cell/Cell.spec.tsx

@@ -2,15 +2,17 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { RowContextProvider } from '../Row/RowContext';
+
 import { Cell, CellProps } from '.';
 
 const onScroll = jest.fn();
 
-const defaultProps: CellProps = {
+const defaultProps: CellProps<unknown> = {
   onScroll,
 };
 
-function renderCell(props: CellProps) {
+function renderCell(props: CellProps<unknown>) {
   return render(
     <table>
       <tbody>
@@ -30,4 +32,44 @@ describe('packages/table/Cell', () => {
       expect(results).toHaveNoViolations();
     });
   });
+
+  describe('accepts a ref', () => {
+    test('regular cell', () => {
+      const ref = React.createRef<HTMLTableCellElement>();
+      render(<Cell ref={ref}>Hello</Cell>);
+
+      expect(ref.current).toBeInTheDocument();
+      expect(ref.current!.textContent).toBe('Hello');
+    });
+
+    test('RT cell', () => {
+      const ref = React.createRef<HTMLTableCellElement>();
+      const cellObj = {
+        id: '1',
+        column: {
+          getIsFirstColumn: () => false,
+        },
+      };
+
+      const providerValue = {
+        getIsExpanded: () => false,
+        getCanExpand: () => false,
+        toggleExpanded: () => {},
+        depth: 1,
+        disabled: false,
+      };
+
+      render(
+        <RowContextProvider {...providerValue}>
+          {/* @ts-expect-error - dummy cell data is missing properties */}
+          <Cell cell={cellObj} ref={ref}>
+            Hello RT
+          </Cell>
+        </RowContextProvider>,
+      );
+
+      expect(ref.current).toBeInTheDocument();
+      expect(ref.current!.textContent).toBe('Hello RT');
+    });
+  });
 });

packages/table/src/Cell/Cell.stories.tsx

@@ -10,7 +10,7 @@ import InternalRowBase from '../Row/InternalRowBase';
 import Table from '../Table';
 import TableBody from '../TableBody';
 
-import InternalCell from './InternalCell';
+import InternalCell from './InternalCellBase';
 
 const meta: StoryMetaType<typeof InternalCell> = {
   title: 'Components/Table/Cell',
@@ -20,11 +20,9 @@ const meta: StoryMetaType<typeof InternalCell> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        depth: [0, 1],
         align: ['left', 'center', 'right'],
       },
       args: {
-        cellIndex: 0,
         children: 'Cell content',
       },
       decorator: (Instance, ctx) => {