feat(AsideHeader)!: add ref prop for popup-anchor

gravity-ui · Oct 4, 2023 · 48f83ce · 48f83ce
1 parent d5b2f6d
commit 48f83ce
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -7,7 +7,7 @@ import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../consta
 import {Content} from '../Content';
 
 import {AsideHeaderContextProvider, AsideHeaderInnerContextProvider} from './AsideHeaderContext';
-import {AsideHeaderGeneralProps, AsideHeaderDefaultProps, AsideHeaderInnerProps} from './types';
+import {AsideHeaderGeneralProps, AsideHeaderDefaultProps} from './types';
 
 import {FirstPanel} from './components';
 import {b} from './utils';
@@ -18,7 +18,7 @@ export interface AsideHeaderProps
     extends AsideHeaderGeneralProps,
         Partial<AsideHeaderDefaultProps> {}
 
-export const AsideHeader = (props: AsideHeaderInnerProps) => {
+export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>((props, ref) => {
     const {className, compact, onClosePanel} = props;
 
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
@@ -43,7 +43,7 @@ export const AsideHeader = (props: AsideHeaderInnerProps) => {
                 <div className={b({compact}, className)}>
                     <div className={b('pane-container')}>
                         {/* First Panel */}
-                        <FirstPanel />
+                        <FirstPanel ref={ref} />
                         {/* Second Panel */}
                         <Content
                             size={size}
@@ -55,4 +55,4 @@ export const AsideHeader = (props: AsideHeaderInnerProps) => {
             </AsideHeaderInnerContextProvider>
         </AsideHeaderContextProvider>
     );
-};
+});
diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -8,7 +8,7 @@ import {Header} from './Header';
 import {CollapseButton} from './CollapseButton';
 import {Panels} from './Panels';
 
-export const FirstPanel = () => {
+export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
     const {
         size,
         onItemClick,
@@ -20,7 +20,7 @@ export const FirstPanel = () => {
         compact,
     } = useAsideHeaderInnerContext();
 
-    const asideRef = useRef<HTMLDivElement>(null);
+    const asideRef = ref || useRef<HTMLDivElement>(null);
 
     return (
         <>
@@ -52,4 +52,4 @@ export const FirstPanel = () => {
             <Panels />
         </>
     );
-};
+});
diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
@@ -14,7 +14,7 @@ export interface AsideHeaderGeneralProps {
     renderFooter?: (data: {
         size: number;
         compact: boolean;
-        asideRef: React.RefObject<HTMLDivElement>;
+        asideRef: React.ForwardedRef<HTMLDivElement>;
     }) => React.ReactNode;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;