@rc-component/listy 1.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+# @rc-component/Listy
+
+React Listy Component
+
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Test coverage][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
+
+[npm-image]: http://img.shields.io/npm/v/@rc-component/listy.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/listy
+[github-actions-image]: https://github.com/react-component/listy/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/listy/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/listy/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/react-component/listy/branch/master
+[david-url]: https://david-dm.org/react-component/listy
+[david-image]: https://david-dm.org/react-component/listy/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/listy?type=dev
+[david-dev-image]: https://david-dm.org/react-component/listy/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/@rc-component/listy.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/listy
+[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/listy
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/listy
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+[dumi-url]: https://github.com/umijs/dumi
+
+## Install
+
+[![@rc-component/listy](https://nodei.co/npm/@rc-component/listy.png)](https://npmjs.org/package/@rc-component/listy)
+
+## Usage
+
+Include the default [styling](https://github.com/react-component/listy/blob/master/assets/index.less#L4:L11) and then:
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Listy from '@rc-component/listy';
+
+const items = Array.from({ length: 100 }, (_, index) => ({
+  id: index,
+  name: `Item ${index}`,
+}));
+
+const App = () => (
+  <Listy
+    items={items}
+    height={240}
+    itemHeight={32}
+    rowKey="id"
+    itemRender={(item) => <div>{item.name}</div>}
+  />
+);
+
+ReactDOM.createRoot(container).render(<App />);
+```
+
+## Compatibility
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE11, Edge                                                                                                                                                                                                     | last 2 versions                                                                                                                                                                                                  | last 2 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                                      |
+
+## Example
+
+http://localhost:9001
+
+## Development
+
+```
+npm install
+npm start
+```
+
+## API
+
+### props
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| items | `T[]` | `[]` | 列表数据源，虚拟滚动会基于此计算高度。 |
+| rowKey | `keyof T \| (item: T) => React.Key` | required | 返回每一项的唯一标识，用于缓存高度与滚动定位。 |
+| itemRender | `(item: T, index: number) => React.ReactNode` | required | 渲染单行内容的函数。 |
+| height | `number` | - | 列表可视区域高度。 |
+| itemHeight | `number` | - | 每行的基础高度，虚拟滚动会以此做初始估算。 |
+| group | `{ key: ((item: T) => K) \| K; title: (groupKey: K, items: T[]) => React.ReactNode }` | - | 提供分组 key 与标题渲染，开启后会生成组头。 |
+| sticky | `boolean` | `false` | 为分组头启用粘性悬停效果。 |
+| virtual | `boolean` | `true` | 是否启用虚拟列表模式，可根据需要关闭。 |
+| onScroll | `React.UIEventHandler<HTMLElement>` | - | 滚动时触发，透传内部滚动容器的滚动事件。 |
+| prefixCls | `string` | `rc-listy` | 组件样式前缀，方便自定义样式隔离。 |
+
+### ListyRef
+
+- `scrollTo(config?: number | null | { left?: number; top?: number } | { key: React.Key; align?: 'top' | 'bottom' | 'auto'; offset?: number } | { groupKey: React.Key; align?: 'top' | 'bottom' | 'auto'; offset?: number })`
+  - 传入 `groupKey` 时会直接滚动到对应组头（需启用 `group`）
+
+## Test Case
+
+```
+npm test
+npm run coverage
+```
+
+open coverage/ dir
+
+## License
+
+@rc-component/listy is released under the MIT license.

package/assets/index.css

@@ -0,0 +1,36 @@
+.rc-listy {
+  position: relative;
+}
+.rc-listy-group-header {
+  background-color: #fff;
+}
+.rc-listy-group-header-sticky {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.rc-listy-group-header-fixed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.rc-listy-group-header-holder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.rc-listy-group-section {
+  position: relative;
+}
+.rc-listy-scrollbar {
+  z-index: 1;
+}

package/assets/index.less

@@ -0,0 +1,44 @@
+@listy-prefix-cls: ~'rc-listy';
+
+.@{listy-prefix-cls} {
+  position: relative;
+
+  &-group-header {
+    background-color: #fff;
+
+    &-sticky {
+      position: sticky;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+
+    &-fixed {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    &-holder {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+      pointer-events: none;
+    }
+  }
+
+  &-group-section {
+    position: relative;
+  }
+
+  &-scrollbar {
+    z-index: 1;
+  }
+}

package/es/GroupHeader.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { Group } from './hooks/useGroupSegments';
+export interface GroupHeaderProps<T, K extends React.Key = React.Key> {
+    group: Group<T, K>;
+    groupKey: K;
+    groupItems: T[];
+    prefixCls: string;
+    fixed?: boolean;
+    sticky?: boolean;
+    style?: React.CSSProperties;
+}
+declare const GroupHeaderWithRef: <T, K extends React.Key = React.Key>(props: GroupHeaderProps<T, K> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+export default GroupHeaderWithRef;

package/es/GroupHeader.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+// ============================== Types ===============================
+
+function GroupHeader(props, ref) {
+  // ============================== Props ==============================
+  const {
+    group,
+    groupKey,
+    groupItems,
+    prefixCls,
+    fixed,
+    sticky,
+    style
+  } = props;
+
+  // ============================= Classes =============================
+  const className = clsx(`${prefixCls}-group-header`, {
+    [`${prefixCls}-group-header-sticky`]: sticky,
+    [`${prefixCls}-group-header-fixed`]: fixed
+  });
+
+  // ============================== Render ==============================
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className,
+    style: style
+  }, group.title(groupKey, groupItems));
+}
+const GroupHeaderWithRef = /*#__PURE__*/React.forwardRef(GroupHeader);
+export default GroupHeaderWithRef;

package/es/List.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { Group } from './hooks/useGroupSegments';
+export type RowKey<T> = keyof T | ((item: T) => React.Key);
+export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export interface GroupScrollToConfig {
+    groupKey: React.Key;
+    align?: ScrollAlign;
+    offset?: number;
+}
+export interface KeyScrollToConfig {
+    key: React.Key;
+    align?: ScrollAlign;
+    offset?: number;
+}
+export interface PositionScrollToConfig {
+    left?: number;
+    top?: number;
+}
+export type ListyScrollToConfig = number | null | KeyScrollToConfig | PositionScrollToConfig | GroupScrollToConfig;
+export interface ListyRef {
+    scrollTo: (config?: ListyScrollToConfig) => void;
+}
+export interface ListyProps<T, K extends React.Key = React.Key> {
+    items?: T[];
+    sticky?: boolean;
+    itemHeight?: number;
+    height?: number;
+    group?: Group<T, K>;
+    virtual?: boolean;
+    prefixCls?: string;
+    rowKey: RowKey<T>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    itemRender: (item: T, index: number) => React.ReactNode;
+}
+export interface ListComponentProps<T, K extends React.Key = React.Key> {
+    data: T[];
+    sticky?: boolean;
+    itemHeight?: number;
+    height?: number;
+    group?: Group<T, K>;
+    prefixCls: string;
+    rowKey: RowKey<T>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    itemRender: (item: T, index: number) => React.ReactNode;
+}
+declare const ListyWithForwardRef: <T, K extends React.Key = React.Key>(props: ListyProps<T, K> & {
+    ref?: React.Ref<ListyRef>;
+}) => React.ReactElement;
+export default ListyWithForwardRef;

package/es/List.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import RawList from "./RawList";
+import VirtualList from "./VirtualList";
+
+// ============================== Types ===============================
+
+function Listy(props, ref) {
+  // ============================== Props ==============================
+  const {
+    items,
+    virtual = true,
+    prefixCls = 'rc-listy',
+    ...restProps
+  } = props;
+
+  // =============================== Data ===============================
+  const data = React.useMemo(() => items || [], [items]);
+
+  // ============================== Render ===============================
+  const sharedListProps = {
+    ...restProps,
+    data,
+    prefixCls,
+    ref
+  };
+  const listNode = virtual ? /*#__PURE__*/React.createElement(VirtualList, sharedListProps) : /*#__PURE__*/React.createElement(RawList, sharedListProps);
+  return listNode;
+}
+
+// Const to support generic with forwardRef
+const ListyWithForwardRef = /*#__PURE__*/forwardRef(Listy);
+export default ListyWithForwardRef;

package/es/RawList/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ListComponentProps } from '../List';
+export type RawListProps<T, K extends React.Key = React.Key> = ListComponentProps<T, K>;
+declare const RawListWithRef: any;
+export default RawListWithRef;

package/es/RawList/index.js

@@ -0,0 +1,90 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { useEvent } from '@rc-component/util';
+import GroupHeader from "../GroupHeader";
+import useGroupSegments from "../hooks/useGroupSegments";
+import useRawListScroll from "./useRawListScroll";
+
+// ============================== Types ===============================
+
+function RawList(props, ref) {
+  // ============================== Props ==============================
+  const {
+    data,
+    group,
+    height,
+    itemRender,
+    onScroll,
+    prefixCls,
+    rowKey,
+    sticky
+  } = props;
+
+  // =============================== Refs ===============================
+  const holderRef = useRawListScroll(ref, prefixCls, !!(sticky && group));
+
+  // =============================== Data ===============================
+  const groupData = useGroupSegments(data, group);
+
+  // ============================== Utils ===============================
+  const getItemKey = useEvent(item => {
+    if (typeof rowKey === 'function') {
+      return rowKey(item);
+    }
+    return item[rowKey];
+  });
+  const getScrollTargetProps = React.useCallback(key => ({
+    'data-key': String(key)
+  }), []);
+
+  // ============================ Render Item ===========================
+  const renderItem = React.useCallback((item, index, groupKey) => {
+    const key = getItemKey(item);
+    const scrollTargetProps = getScrollTargetProps(key);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      key: key,
+      className: `${prefixCls}-item`,
+      style: sticky && groupKey !== undefined ? {
+        scrollMarginTop: `var(--${prefixCls}-item-scroll-margin-top, 0px)`
+      } : undefined
+    }, scrollTargetProps), itemRender(item, index));
+  }, [getItemKey, getScrollTargetProps, itemRender, prefixCls, sticky]);
+
+  // ============================= Content ==============================
+  const rawContent = group ? Array.from(groupData, ([groupKey, groupItems]) => {
+    const currentGroupItems = groupItems.map(({
+      item
+    }) => item);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      key: groupKey,
+      className: `${prefixCls}-group-section`
+    }, getScrollTargetProps(groupKey)), /*#__PURE__*/React.createElement(GroupHeader, {
+      group: group,
+      groupKey: groupKey,
+      groupItems: currentGroupItems,
+      prefixCls: prefixCls,
+      sticky: sticky
+    }), groupItems.map(({
+      item,
+      index
+    }) => {
+      return renderItem(item, index, groupKey);
+    }));
+  }) : data.map((item, index) => {
+    return renderItem(item, index);
+  });
+
+  // ============================== Render ==============================
+  return /*#__PURE__*/React.createElement("div", {
+    ref: holderRef,
+    className: prefixCls,
+    style: {
+      maxHeight: height,
+      overflowY: height === undefined ? undefined : 'auto',
+      overflowAnchor: 'none'
+    },
+    onScroll: onScroll
+  }, rawContent);
+}
+const RawListWithRef = /*#__PURE__*/React.forwardRef(RawList);
+export default RawListWithRef;

package/es/RawList/useRawListScroll.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ListyRef } from '../List';
+export default function useRawListScroll(ref: React.Ref<ListyRef>, prefixCls: string, stickyGroup: boolean): React.RefObject<HTMLDivElement>;

package/es/RawList/useRawListScroll.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+export default function useRawListScroll(ref, prefixCls, stickyGroup) {
+  // =============================== Refs ===============================
+  const holderRef = React.useRef(null);
+
+  // ============================== Utils ===============================
+  const getStickyHeaderHeight = React.useCallback(targetElement => {
+    if (!stickyGroup) {
+      return 0;
+    }
+    const groupSection = targetElement.closest(`.${CSS.escape(`${prefixCls}-group-section`)}`);
+    const groupHeader = groupSection?.querySelector(`.${CSS.escape(`${prefixCls}-group-header`)}`);
+    if (!groupHeader) {
+      return 0;
+    }
+    const rect = groupHeader.getBoundingClientRect();
+    const height = rect.height || rect.bottom - rect.top || groupHeader.offsetHeight;
+    return Number.isFinite(height) ? height : 0;
+  }, [prefixCls, stickyGroup]);
+  const setTargetScrollMargin = React.useCallback((targetElement, align) => {
+    const marginTop = align === 'top' ? getStickyHeaderHeight(targetElement) : 0;
+    targetElement.style.setProperty(`--${prefixCls}-item-scroll-margin-top`, `${marginTop}px`);
+  }, [getStickyHeaderHeight, prefixCls]);
+
+  // ============================== Scroll ==============================
+  const scrollTo = React.useCallback(config => {
+    const holder = holderRef.current;
+    if (!holder || config == null) {
+      return;
+    }
+    if (typeof config === 'number') {
+      holder.scrollTop = config;
+      return;
+    }
+    if ('key' in config || 'groupKey' in config) {
+      const {
+        align = 'top'
+      } = config;
+      const targetKey = 'groupKey' in config ? config.groupKey : config.key;
+      const targetElement = holder.querySelector(`[data-key="${CSS.escape(String(targetKey))}"]`);
+      if (targetElement) {
+        if ('key' in config) {
+          setTargetScrollMargin(targetElement, align);
+        }
+        targetElement.scrollIntoView({
+          block: align === 'bottom' ? 'end' : align === 'auto' ? 'nearest' : 'start',
+          inline: 'nearest'
+        });
+      }
+      return;
+    }
+    const {
+      left,
+      top
+    } = config;
+    if (left !== undefined) {
+      holder.scrollLeft = left;
+    }
+    if (top !== undefined) {
+      holder.scrollTop = top;
+    }
+  }, [setTargetScrollMargin]);
+
+  // ============================ Imperative ============================
+  React.useImperativeHandle(ref, () => ({
+    scrollTo
+  }), [scrollTo]);
+
+  // ============================== Return ==============================
+  return holderRef;
+}

package/es/VirtualList/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ListComponentProps } from '../List';
+export type VirtualListProps<T, K extends React.Key = React.Key> = ListComponentProps<T, K>;
+declare const VirtualListWithRef: any;
+export default VirtualListWithRef;

package/es/VirtualList/index.js

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import RcVirtualList from '@rc-component/virtual-list';
+import { useEvent } from '@rc-component/util';
+import GroupHeader from "../GroupHeader";
+import useGroupSegments from "../hooks/useGroupSegments";
+import useFlattenRows from "./useFlattenRows";
+import useStickyGroupHeader from "./useStickyGroupHeader";
+
+// ============================== Types ===============================
+
+function VirtualList(props, ref) {
+  // ============================== Props ==============================
+  const {
+    data,
+    group,
+    height,
+    itemHeight,
+    itemRender,
+    onScroll,
+    prefixCls,
+    rowKey,
+    sticky
+  } = props;
+
+  // =============================== Refs ===============================
+  const listRef = React.useRef(null);
+
+  // =============================== Data ===============================
+  const groupData = useGroupSegments(data, group);
+
+  // =============================== Keys ===============================
+  const getItemKey = useEvent(item => {
+    if (typeof rowKey === 'function') {
+      return rowKey(item);
+    }
+    return item[rowKey];
+  });
+  const getKey = useEvent(row => {
+    if (row.type === 'header') {
+      return row.groupKey;
+    }
+    return getItemKey(row.item);
+  });
+
+  // ============================== Rows ================================
+  const {
+    rows,
+    groupKeys,
+    groupKeyToItems
+  } = useFlattenRows(data, groupData, group);
+
+  // ============================== Lookup ==============================
+  const itemKeyToGroupKey = React.useMemo(() => {
+    const itemGroupMap = new Map();
+    groupData.forEach((groupItems, groupKey) => {
+      groupItems.forEach(({
+        item
+      }) => {
+        itemGroupMap.set(getItemKey(item), groupKey);
+      });
+    });
+    return itemGroupMap;
+  }, [getItemKey, groupData]);
+
+  // ============================== Scroll ==============================
+  const scrollTo = useEvent(config => {
+    // Group headers are rows in the virtual data, so group scroll maps to key scroll.
+    if (config && typeof config === 'object' && 'groupKey' in config) {
+      const {
+        groupKey,
+        align,
+        offset
+      } = config;
+      listRef.current?.scrollTo({
+        key: groupKey,
+        align,
+        offset
+      });
+      return;
+    }
+
+    // For sticky grouped lists, top-aligned item scroll should land below its header.
+    if (config && typeof config === 'object' && 'key' in config && sticky && group && config.align === 'top') {
+      const groupKey = itemKeyToGroupKey.get(config.key);
+      if (groupKey !== undefined) {
+        const {
+          offset = 0
+        } = config;
+        listRef.current?.scrollTo({
+          ...config,
+          // Use the measured header height so top-aligned items stay below it.
+          offset: ({
+            getSize
+          }) => {
+            const headerSize = getSize(groupKey);
+            const headerHeight = headerSize.bottom - headerSize.top;
+            return offset + (Number.isFinite(headerHeight) ? headerHeight : 0);
+          }
+        });
+        return;
+      }
+    }
+
+    // Other scroll shapes are already supported by the underlying virtual list.
+    listRef.current?.scrollTo(config);
+  });
+
+  // ============================ Imperative ============================
+  React.useImperativeHandle(ref, () => ({
+    scrollTo
+  }), [scrollTo]);
+
+  // ============================== Sticky ==============================
+  const extraRender = useStickyGroupHeader({
+    enabled: !!(sticky && group),
+    group,
+    groupKeys,
+    groupKeyToItems,
+    prefixCls,
+    listRef
+  });
+
+  // ============================ Render Row ============================
+  const renderHeaderRow = React.useCallback(groupKey => {
+    const groupItems = groupKeyToItems.get(groupKey) || [];
+    return /*#__PURE__*/React.createElement(GroupHeader, {
+      group: group,
+      groupKey: groupKey,
+      groupItems: groupItems,
+      prefixCls: prefixCls
+    });
+  }, [group, groupKeyToItems, prefixCls]);
+
+  // ============================== Render ==============================
+  return /*#__PURE__*/React.createElement(RcVirtualList, {
+    ref: listRef,
+    data: rows,
+    fullHeight: false,
+    height: height,
+    itemHeight: itemHeight,
+    itemKey: getKey,
+    onScroll: onScroll,
+    prefixCls: prefixCls,
+    virtual: true,
+    extraRender: extraRender
+  }, row => row.type === 'header' ? renderHeaderRow(row.groupKey) : /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-item`
+  }, itemRender(row.item, row.index)));
+}
+const VirtualListWithRef = /*#__PURE__*/React.forwardRef(VirtualList);
+export default VirtualListWithRef;