feat(Popover): updated anchorRef prop, added strategy prop to Popover (…

…#372) Co-authored-by: Sergey Makhnatkin <[email protected]>
gravity-ui · Nov 1, 2022 · 22021c9 · 22021c9
1 parent 4eab994
commit 22021c9
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -47,6 +47,7 @@ export const Popover = forwardRef(function (
         onCloseClick,
         onClick,
         anchorRef,
+        strategy,
         qa,
     }: PopoverProps & QAProps,
     ref: ForwardedRef<PopoverInstanceProps | undefined>,
@@ -93,6 +94,7 @@ export const Popover = forwardRef(function (
 
     const tooltip = (
         <Popup
+            strategy={strategy}
             anchorRef={anchorRef || controlRef}
             className={cnPopover(
                 'tooltip',

diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
@@ -1,3 +1,3 @@
 export * from './Popover';
-export {PopoverButtonProps, PopoverProps, PopoverInstanceProps} from './types';
+export {PopoverButtonProps, PopoverProps, PopoverInstanceProps, PopoverAnchorRef} from './types';
 export {PopoverBehavior} from './config';
diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
@@ -1,9 +1,9 @@
 import React from 'react';
-import {PopupPlacement} from '../Popup';
 import {ButtonsProps} from './components/Buttons/Buttons';
 import {ContentProps} from './components/Content/Content';
 import {LinksProps} from './components/Links/Links';
 import {TriggerProps} from './components/Trigger/Trigger';
+import {PopupProps, PopupAnchorRef} from '../Popup';
 import {PopoverBehavior} from './config';
 
 export type PopoverButtonProps = {
@@ -18,8 +18,6 @@ export type PopoverButtonProps = {
 };
 
 export type PopoverExternalProps = {
-    /** Allows to use custom anchor and disables `openByHover` and `onClick` for the component */
-    anchorRef?: React.RefObject<HTMLElement>;
     /** Tooltip's trigger content over which the tooltip is shown */
     children?: TriggerProps['children'];
     /** Tooltip's title */
@@ -81,6 +79,7 @@ export type PopoverBehaviorProps = {
 };
 
 export type PopoverTheme = 'info' | 'special' | 'announcement';
+export type PopoverAnchorRef = PopupAnchorRef;
 
 export type PopoverDefaultProps = {
     /** Whether the tooltip initially opened */
@@ -96,8 +95,6 @@ export type PopoverDefaultProps = {
         top?: number;
         left?: number;
     };
-    /** Tooltip's placement */
-    placement: PopupPlacement;
     /** Whether the tooltip has a tail */
     hasArrow: boolean;
     /** Whether the tooltip has a close button */
@@ -110,7 +107,8 @@ export type PopoverDefaultProps = {
     size: 's' | 'l';
 };
 
-export type PopoverProps = PopoverExternalProps &
+export type PopoverProps = Pick<PopupProps, 'anchorRef' | 'strategy' | 'placement'> &
+    PopoverExternalProps &
     PopoverBehaviorProps &
     Partial<PopoverDefaultProps>;
 

diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -6,10 +6,11 @@ import {Portal} from '../Portal';
 import {useLayer, LayerExtendableProps} from '../utils/useLayer';
 import {
     usePopper,
-    PopperProps,
+    PopperAnchorRef,
+    PopperModifiers,
     PopperOffset,
     PopperPlacement,
-    PopperModifiers,
+    PopperProps,
 } from '../utils/usePopper';
 import {PopupArrow} from './PopupArrow';
 import {usePreviousValue} from '../utils/usePreviousValue';
@@ -19,6 +20,7 @@ import {useForkRef} from '../utils/useForkRef';
 import './Popup.scss';
 
 export type PopupPlacement = PopperPlacement;
+export type PopupAnchorRef = PopperAnchorRef;
 
 export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, QAProps {
     open?: boolean;

diff --git a/src/components/utils/usePopper.ts b/src/components/utils/usePopper.ts
@@ -5,9 +5,10 @@ import popper from '@popperjs/core';
 export type PopperPlacement = popper.Placement | popper.Placement[];
 export type PopperOffset = [number, number];
 export type PopperModifiers = Modifier<unknown, Record<string, unknown>>[];
+export type PopperAnchorRef = React.RefObject<Element | popper.VirtualElement>;
 
 export interface PopperProps {
-    anchorRef?: React.RefObject<Element | popper.VirtualElement>;
+    anchorRef?: PopperAnchorRef;
     placement?: PopperPlacement;
     offset?: [number, number];
     modifiers?: PopperModifiers;