feat: ListView components

jest.setup.ts

@@ -50,6 +50,21 @@ Object.defineProperty(window, 'ResizeObserver', {
   },
 });
 
+Object.defineProperty(window, 'DOMRect', {
+  value: function (x: number = 0, y: number = 0, width = 0, height = 0) {
+    return TestUtils.createMockProxy<DOMRect>({
+      x,
+      y,
+      width,
+      height,
+      top: y,
+      bottom: y + height,
+      left: x,
+      right: x + width,
+    });
+  },
+});
+
 Object.defineProperty(window, 'TextDecoder', {
   value: TextDecoder,
 });

packages/code-studio/src/styleguide/ListViews.tsx

@@ -0,0 +1,123 @@
+import React, { useCallback, useState } from 'react';
+import {
+  Grid,
+  Icon,
+  Item,
+  ListView,
+  ItemKey,
+  Text,
+} from '@deephaven/components';
+import { vsAccount, vsPerson } from '@deephaven/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { generateNormalizedItems, sampleSectionIdAndClasses } from './utils';
+
+// Generate enough items to require scrolling
+const itemsSimple = [...generateNormalizedItems(52)];
+
+function AccountIllustration(): JSX.Element {
+  return (
+    // Images in ListView items require a slot of 'image' or 'illustration' to
+    // be set in order to be positioned correctly:
+    // https://github.com/adobe/react-spectrum/blob/784737effd44b9d5e2b1316e690da44555eafd7e/packages/%40react-spectrum/list/src/ListViewItem.tsx#L266-L267
+    <Icon slot="illustration">
+      <FontAwesomeIcon icon={vsAccount} />
+    </Icon>
+  );
+}
+
+export function ListViews(): JSX.Element {
+  const [selectedKeys, setSelectedKeys] = useState<'all' | Iterable<ItemKey>>(
+    []
+  );
+
+  const onChange = useCallback((keys: 'all' | Iterable<ItemKey>): void => {
+    setSelectedKeys(keys);
+  }, []);
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <div {...sampleSectionIdAndClasses('list-views')}>
+      <h2 className="ui-title">List View</h2>
+
+      <Grid columnGap={14} height="size-6000">
+        <Text>Single Child</Text>
+        <ListView
+          density="compact"
+          gridRow="2"
+          aria-label="Single Child"
+          selectionMode="multiple"
+        >
+          <Item>Aaa</Item>
+        </ListView>
+
+        <label>Icons</label>
+        <ListView
+          gridRow="2"
+          aria-label="Icon"
+          density="compact"
+          selectionMode="multiple"
+        >
+          <Item textValue="Item with icon A">
+            <AccountIllustration />
+            <Text>Item with icon A</Text>
+          </Item>
+          <Item textValue="Item with icon B">
+            <AccountIllustration />
+            <Text>Item with icon B</Text>
+          </Item>
+          <Item textValue="Item with icon C">
+            <AccountIllustration />
+            <Text>Item with icon C</Text>
+          </Item>
+          <Item textValue="Item with icon D">
+            <AccountIllustration />
+            <Text>Item with icon D with overflowing content</Text>
+          </Item>
+        </ListView>
+
+        <label>Mixed Children Types</label>
+        <ListView
+          gridRow="2"
+          aria-label="Mixed Children Types"
+          density="compact"
+          maxWidth="size-2400"
+          selectionMode="multiple"
+          defaultSelectedKeys={[999, 444]}
+        >
+          {/* eslint-disable react/jsx-curly-brace-presence */}
+          {'String 1'}
+          {'String 2'}
+          {'String 3'}
+          {''}
+          {'Some really long text that should get truncated'}
+          {/* eslint-enable react/jsx-curly-brace-presence */}
+          {444}
+          {999}
+          {true}
+          {false}
+          <Item>Item Aaa</Item>
+          <Item>Item Bbb</Item>
+          <Item textValue="Complex Ccc">
+            <Icon slot="image">
+              <FontAwesomeIcon icon={vsPerson} />
+            </Icon>
+            <Text>Complex Ccc with text that should be truncated</Text>
+          </Item>
+        </ListView>
+
+        <label>Controlled</label>
+        <ListView
+          gridRow="2"
+          aria-label="Controlled"
+          selectionMode="multiple"
+          selectedKeys={selectedKeys}
+          onChange={onChange}
+        >
+          {itemsSimple}
+        </ListView>
+      </Grid>
+    </div>
+  );
+}
+
+export default ListViews;

packages/code-studio/src/styleguide/Pickers.tsx

@@ -10,15 +10,10 @@ import {
 import { vsPerson } from '@deephaven/icons';
 import { Icon } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { sampleSectionIdAndClasses } from './utils';
+import { generateNormalizedItems, sampleSectionIdAndClasses } from './utils';
 
 // Generate enough items to require scrolling
-const items = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
-  .split('')
-  .map((key, i) => ({
-    key,
-    item: { key: (i + 1) * 100, content: `${key}${key}${key}` },
-  }));
+const items = [...generateNormalizedItems(52)];
 
 function PersonIcon(): JSX.Element {
   return (
@@ -29,7 +24,7 @@ function PersonIcon(): JSX.Element {
 }
 
 export function Pickers(): JSX.Element {
-  const [selectedKey, setSelectedKey] = useState<ItemKey>();
+  const [selectedKey, setSelectedKey] = useState<ItemKey | null>(null);
 
   const onChange = useCallback((key: ItemKey): void => {
     setSelectedKey(key);

packages/code-studio/src/styleguide/StyleGuide.test.tsx

@@ -9,11 +9,37 @@ import StyleGuide from './StyleGuide';
 window.HTMLElement.prototype.scroll = jest.fn();
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
+/**
+ * Mock a dimension property of a ListView element.
+ */
+function mockListViewDimension(propName: keyof HTMLElement, value: number) {
+  jest
+    .spyOn(window.HTMLElement.prototype, propName, 'get')
+    .mockImplementation(function getDimension() {
+      const isSpectrumListView =
+        this instanceof HTMLElement &&
+        this.className.includes('_react-spectrum-ListView');
+
+      // For non ListView, just return zero which is the default value anyway.
+      return isSpectrumListView === true ? value : 0;
+    });
+}
+
 describe('<StyleGuide /> mounts', () => {
   test('h1 text of StyleGuide renders', () => {
     // Provide a non-null array to ThemeProvider to tell it to initialize
     const customThemes: ThemeData[] = [];
 
+    // React Spectrum `useVirtualizerItem` depends on `scrollWidth` and `scrollHeight`.
+    // Mocking these to avoid React "Maximum update depth exceeded" errors.
+    // https://github.com/adobe/react-spectrum/blob/0b2a838b36ad6d86eee13abaf68b7e4d2b4ada6c/packages/%40react-aria/virtualizer/src/useVirtualizerItem.ts#L49C3-L49C60
+    // From preview docs: https://reactspectrum.blob.core.windows.net/reactspectrum/726a5e8f0ed50fc8d98e39c74bd6dfeb3660fbdf/docs/react-spectrum/testing.html#virtualized-components
+    // The virtualizer will now think it has a visible area of 1000px x 1000px and that the items within it are 40px x 40px
+    mockListViewDimension('clientWidth', 1000);
+    mockListViewDimension('clientHeight', 1000);
+    mockListViewDimension('scrollHeight', 40);
+    mockListViewDimension('scrollWidth', 40);
+
     expect(() =>
       render(
         <ApiContext.Provider value={dh}>

packages/code-studio/src/styleguide/StyleGuide.tsx

@@ -36,6 +36,7 @@ import { GoldenLayout } from './GoldenLayout';
 import { RandomAreaPlotAnimation } from './RandomAreaPlotAnimation';
 import SpectrumComparison from './SpectrumComparison';
 import Pickers from './Pickers';
+import ListViews from './ListViews';
 
 const stickyProps = {
   position: 'sticky',
@@ -109,6 +110,7 @@ function StyleGuide(): React.ReactElement {
         <Buttons />
         <Progress />
         <Inputs />
+        <ListViews />
         <Pickers />
         <ItemListInputs />
         <DraggableLists />