@codecademy/gamut
72.5.372.5.4-alpha.aec7dd.0
dist/PopoverContainer/types.d.ts~
dist/PopoverContainer/types.d.tsModified+8−9
Index: package/dist/PopoverContainer/types.d.ts
===================================================================
--- package/dist/PopoverContainer/types.d.ts
+++ package/dist/PopoverContainer/types.d.ts
@@ -1,26 +1,25 @@
import { RefObject } from 'react';
import { FocusTrapProps } from '../FocusTrap';
import { WithChildrenProp } from '../utils';
-export type Alignments = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | 'bottom' | 'left' | 'right';
-export type TargetRef = Pick<HTMLDivElement, 'getBoundingClientRect' | 'contains' | 'offsetHeight' | 'offsetWidth' | 'offsetTop' | 'offsetLeft' | 'offsetParent'> & HTMLElement;
-export interface PositionContext {
+export type PopoverContainerAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | 'bottom' | 'left' | 'right';
+export interface PopoverPositionContext {
width: number;
height: number;
top: number;
left: number;
right: number;
bottom: number;
}
-export interface ContainerState {
- parent: PositionContext;
+export interface PopoverContainerState {
+ parent: PopoverPositionContext;
viewport: DOMRect;
}
export interface PopoverAlignment {
/**
* Which vertical edge of the source component to align against.
*/
- alignment?: Alignments;
+ alignment?: PopoverContainerAlignment;
/** Align to the inside edge of the target div */
invertAxis?: 'x' | 'y';
/** Whether the popover renders inside the current DOM context or escapes with a portal */
inline?: boolean;
@@ -37,10 +36,10 @@
*/
offset?: number;
}
export interface PopoverPositionConfig extends PopoverAlignment {
- container: PositionContext;
- alignment: Alignments;
+ container: PopoverPositionContext;
+ alignment: PopoverContainerAlignment;
}
export interface PopoverContainerProps extends PopoverAlignment, WithChildrenProp, Pick<FocusTrapProps, 'focusOnProps'> {
className?: string;
/**
@@ -54,9 +53,9 @@
onRequestClose?: () => void;
/**
* The target element around which the popover will be positioned.
*/
- targetRef: RefObject<TargetRef>;
+ targetRef: RefObject<HTMLElement>;
/**
* If true, it will allow outside page interaction. Popover container will still close when clicking outside of the popover or hitting the escape key.
*/
allowPageInteraction?: boolean;