feat: Space support ref (#42266)

components/space/__tests__/index.test.tsx

@@ -210,4 +210,16 @@ describe('Space', () => {
     expect(item).toBeEmptyDOMElement();
     expect(getComputedStyle(item).display).toBe('none');
   });
+
+  it('should ref work', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { container } = render(
+      <Space ref={ref}>
+        <span>Text1</span>
+        <span>Text2</span>
+      </Space>,
+    );
+
+    expect(ref.current).toBe(container.firstChild);
+  });
 });

components/space/index.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import * as React from 'react';
+import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
-import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
 import Compact from './Compact';
 import Item from './Item';
 
@@ -41,7 +41,7 @@ function getNumberSize(size: SpaceSize) {
   return typeof size === 'string' ? spaceSize[size] : size || 0;
 }
 
-const Space: React.FC<SpaceProps> = (props) => {
+const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
   const { getPrefixCls, space, direction: directionConfig } = React.useContext(ConfigContext);
 
   const {
@@ -142,6 +142,7 @@ const Space: React.FC<SpaceProps> = (props) => {
 
   return wrapSSR(
     <div
+      ref={ref}
       className={cn}
       style={{
         ...gapStyle,
@@ -152,13 +153,15 @@ const Space: React.FC<SpaceProps> = (props) => {
       <SpaceContext.Provider value={spaceContext}>{nodes}</SpaceContext.Provider>
     </div>,
   );
-};
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Space.displayName = 'Space';
 }
 
-type CompoundedComponent = React.FC<SpaceProps> & {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  SpaceProps & React.RefAttributes<HTMLDivElement>
+> & {
   Compact: typeof Compact;
 };