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

* feat(AsideHeader)!: add ref prop for popup-anchor * chore: add ref to AsideHeader story * chore: fix lint * chore: add AsideHeader readme
gravity-ui · Oct 5, 2023 · de2e3f4 · de2e3f4
1 parent 9836e37
commit de2e3f4
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 12 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -12,8 +12,9 @@ import './AsideHeader.scss';
 import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants';
 import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue';
 
-export const AsideHeader = (props: AsideHeaderProps) => {
+export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>((props, ref) => {
     const {className, compact} = props;
+
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);
     const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size});
@@ -23,7 +24,7 @@ export const AsideHeader = (props: AsideHeaderProps) => {
                 <div className={b({compact}, className)}>
                     <div className={b('pane-container')}>
                         {/* First Panel */}
-                        <FirstPanel />
+                        <FirstPanel ref={ref} />
                         {/* Second Panel */}
                         <Content
                             size={size}
@@ -35,4 +36,4 @@ export const AsideHeader = (props: AsideHeaderProps) => {
             </AsideHeaderInnerContextProvider>
         </AsideHeaderContextProvider>
     );
-};
+});
diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md
@@ -0,0 +1,17 @@
+# AsideHeader [⚠️ WIP]
+
+## Imports
+
+```ts
+import {AsideHeader} from '@gravity-ui/navigation';
+```
+
+## Example
+
+// TODO
+
+## Properties
+
+| Name | Description                  |                          Type                          | Default |
+| :--- | :--------------------------- | :----------------------------------------------------: | :-----: |
+| ref  | `ref` to target popup anchor | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` |         |
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -27,10 +27,14 @@ body {
         }
     }
 
-    &__settings-ul {
+    &__settings {
         padding-right: 30px;
     }
 
+    &__settings-ul {
+        margin: 0;
+    }
+
     &__panel {
         width: 300px;
         height: 100%;

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -35,6 +35,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
     multipleTooltip = false,
     initialCompact = false,
 }) => {
+    const ref = React.useRef<HTMLDivElement>(null);
     const [popupVisible, setPopupVisible] = React.useState(false);
     const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
@@ -73,6 +74,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                 </div>
             </Modal>
             <AsideHeader
+                ref={ref}
                 logo={{
                     text: 'Service',
                     icon: logoIcon,
@@ -93,12 +95,15 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                                 setSubheaderPopupVisible(!subheaderPopupVisible);
                             },
                         },
+                        popupAnchor: ref,
+                        popupPlacement: ['right-start'],
+                        popupOffset: [10, 10],
                         popupVisible: subheaderPopupVisible,
                         onClosePopup: () => setSubheaderPopupVisible(false),
                         renderPopupContent: () => {
                             return (
-                                <div className={b('settings-ul')}>
-                                    <ul>
+                                <div className={b('settings')}>
+                                    <ul className={b('settings-ul')}>
                                         <li>Set 1</li>
                                         <li>Set 2</li>
                                         <li>Set 3</li>

diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useMemo} from 'react';
 import {CompositeBar} from '../../CompositeBar/CompositeBar';
 import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../utils';
@@ -9,7 +9,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,
@@ -23,10 +23,12 @@ export const FirstPanel = () => {
 
     const asideRef = useRef<HTMLDivElement>(null);
 
+    const popupAnchorRef = useMemo(() => ref || asideRef, [ref, asideRef]);
+
     return (
         <>
             <div className={b('aside')} style={{width: size}}>
-                <div className={b('aside-popup-anchor')} ref={asideRef} />
+                <div className={b('aside-popup-anchor')} ref={popupAnchorRef} />
                 <div className={b('aside-content', {['with-decoration']: headerDecoration})}>
                     <Header />
                     {visibleMenuItems?.length ? (
@@ -44,7 +46,7 @@ export const FirstPanel = () => {
                         {renderFooter?.({
                             size,
                             compact: Boolean(compact),
-                            asideRef,
+                            asideRef: popupAnchorRef,
                         })}
                     </div>
                     <CollapseButton />
@@ -53,4 +55,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;