feat: Support forward

Author: zombieJ

src/Item.tsx

@@ -19,7 +19,10 @@ export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   invalidate?: boolean;
 }
 
-export default function Item<ItemType>(props: ItemProps<ItemType>) {
+function InternalItem<ItemType>(
+  props: ItemProps<ItemType>,
+  ref: React.Ref<any>,
+) {
   const {
     prefixCls,
     invalidate,
@@ -74,6 +77,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
         ...style,
       }}
       {...restProps}
+      ref={ref}
     >
       {childNode}
     </Component>
@@ -93,3 +97,8 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
 
   return itemNode;
 }
+
+const Item = React.forwardRef(InternalItem);
+Item.displayName = 'Item';
+
+export default Item;

src/RawItem.tsx

@@ -8,7 +8,7 @@ export interface RawItemProps extends React.HTMLAttributes<any> {
   children?: React.ReactNode;
 }
 
-export default function RawItem(props: RawItemProps) {
+const InternalRawItem = (props: RawItemProps, ref: React.Ref<any>) => {
   const context = React.useContext(OverflowContext);
 
   // Render directly when context not provided
@@ -24,10 +24,16 @@ export default function RawItem(props: RawItemProps) {
   return (
     <OverflowContext.Provider value={null}>
       <Item
+        ref={ref}
         className={classNames(contextClassName, className)}
         {...restContext}
         {...restProps}
       />
     </OverflowContext.Provider>
   );
-}
+};
+
+const RawItem = React.forwardRef(InternalRawItem);
+RawItem.displayName = 'RawItem';
+
+export default RawItem;

tests/raw.spec.tsx

@@ -17,17 +17,32 @@ describe('Overflow.Raw', () => {
   }
 
   it('render node directly', () => {
+    const elements = new Set<HTMLElement>();
+
     const wrapper = mount(
       <Overflow<ItemType>
         data={getData(1)}
         renderRawItem={item => {
-          return <Overflow.Item component="li">{item.label}</Overflow.Item>;
+          return (
+            <Overflow.Item
+              component="li"
+              ref={ele => {
+                elements.add(ele);
+              }}
+            >
+              {item.label}
+            </Overflow.Item>
+          );
         }}
         itemKey={item => `bamboo-${item.key}`}
         component="ul"
       />,
     );
 
+    const elementList = [...elements];
+    expect(elementList).toHaveLength(1);
+    expect(elementList[0] instanceof HTMLLIElement).toBeTruthy();
+
     expect(wrapper.render()).toMatchSnapshot();
   });