feat: Add innerProps (#194)

Author: zombieJ

src/Filler.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import classNames from 'classnames';
 
+export type InnerProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
+
 interface FillerProps {
   prefixCls?: string;
   /** Virtual filler height. Should be `count * itemMinHeight` */
@@ -12,14 +14,16 @@ interface FillerProps {
   children: React.ReactNode;
 
   onInnerResize?: () => void;
+
+  innerProps?: InnerProps;
 }
 
 /**
  * Fill component to provided the scroll content real height.
  */
 const Filler = React.forwardRef(
   (
-    { height, offset, children, prefixCls, onInnerResize }: FillerProps,
+    { height, offset, children, prefixCls, onInnerResize, innerProps }: FillerProps,
     ref: React.Ref<HTMLDivElement>,
   ) => {
     let outerStyle: React.CSSProperties = {};
@@ -57,6 +61,7 @@ const Filler = React.forwardRef(
               [`${prefixCls}-holder-inner`]: prefixCls,
             })}
             ref={ref}
+            {...innerProps}
           >
             {children}
           </div>

src/List.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import Filler from './Filler';
+import type { InnerProps } from './Filler';
 import ScrollBar from './ScrollBar';
 import type { RenderFunc, SharedConfig, GetKey } from './interface';
 import useChildren from './hooks/useChildren';
@@ -53,6 +54,9 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
   onScroll?: React.UIEventHandler<HTMLElement>;
   /** Trigger when render list item changed */
   onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
+
+  /** Inject to inner container props. Only use when you need pass aria related data */
+  innerProps?: InnerProps;
 }
 
 export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
@@ -70,6 +74,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     component: Component = 'div',
     onScroll,
     onVisibleChange,
+    innerProps,
     ...restProps
   } = props;
 
@@ -354,6 +359,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           offset={offset}
           onInnerResize={collectHeight}
           ref={fillerInnerRef}
+          innerProps={innerProps}
         >
           {listChildren}
         </Filler>

tests/list.test.js

@@ -211,4 +211,19 @@ describe('List.Basic', () => {
       expect(collected).toBeTruthy();
     });
   });
+
+  it('innerProps', () => {
+    const wrapper = genList({
+      itemHeight: 20,
+      height: 100,
+      data: genData(100),
+      virtual: false,
+      innerProps: {
+        role: 'listbox',
+        id: `my_list`,
+      },
+    });
+
+    expect(wrapper.find('div#my_list').prop('role')).toEqual('listbox');
+  });
 });