popover-enhancements

Author: pan-kot

src/internal/components/chart-popover/index.tsx

@@ -33,6 +33,7 @@ export interface ChartPopoverProps extends PopoverProps {
     </>)
   */
   trackKey?: string | number;
+  minHeight?: number;
 
   /** Optional container element that prevents any clicks in there from dismissing the popover */
   container: Element | null;
@@ -53,6 +54,9 @@ export interface ChartPopoverProps extends PopoverProps {
 
   /** Popover footer */
   footer?: React.ReactNode;
+
+  hoverDismissButton?: boolean;
+  allowScrollToFit?: boolean;
 }
 
 export default React.forwardRef(ChartPopover);
@@ -63,6 +67,8 @@ function ChartPopover(
     size = 'medium',
     fixedWidth = false,
     dismissButton = false,
+    hoverDismissButton = false,
+    allowScrollToFit = false,
     dismissAriaLabel,
 
     children,
@@ -74,6 +80,7 @@ function ChartPopover(
     trackKey,
     onDismiss,
     container,
+    minHeight,
 
     onMouseEnter,
     onMouseLeave,
@@ -127,6 +134,7 @@ function ChartPopover(
         trackRef={trackRef}
         getTrack={getTrack}
         trackKey={trackKey}
+        minHeight={minHeight}
         arrow={position => (
           <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>
             <div className={popoverStyles['arrow-outer']} />
@@ -135,11 +143,12 @@ function ChartPopover(
         )}
         keepPosition={true}
         allowVerticalOverflow={true}
-        allowScrollToFit={isPinned}
+        allowScrollToFit={isPinned || allowScrollToFit}
         hoverArea={true}
       >
         <PopoverBody
-          dismissButton={dismissButton}
+          dismissButton={dismissButton || hoverDismissButton}
+          autoFocusDismissButton={!(hoverDismissButton === true)}
           dismissAriaLabel={dismissAriaLabel}
           header={<span className={testClasses.header}>{title}</span>}
           onDismiss={onDismiss}

src/popover/body.tsx

@@ -16,6 +16,7 @@ import styles from './styles.css.js';
 
 export interface PopoverBodyProps {
   dismissButton: boolean;
+  autoFocusDismissButton?: boolean;
   dismissAriaLabel: string | undefined;
   onDismiss: (() => void) | undefined;
 
@@ -32,6 +33,7 @@ export interface PopoverBodyProps {
 
 export default function PopoverBody({
   dismissButton: showDismissButton,
+  autoFocusDismissButton = true,
   dismissAriaLabel,
   header,
   children,
@@ -61,11 +63,11 @@ export default function PopoverBody({
   // because we also want to focus the dismiss button when it
   // is added dynamically (e.g. in chart popovers)
   useEffect(() => {
-    if (showDismissButton && !dismissButtonFocused.current) {
+    if (showDismissButton && !dismissButtonFocused.current && autoFocusDismissButton) {
       dismissButtonRef.current?.focus({ preventScroll: true });
     }
     dismissButtonFocused.current = showDismissButton;
-  }, [showDismissButton]);
+  }, [showDismissButton, autoFocusDismissButton]);
 
   const dismissButton = (showDismissButton ?? null) && (
     <div

src/popover/container.tsx

@@ -26,6 +26,7 @@ interface PopoverContainerProps {
     </>)
   */
   trackKey?: string | number;
+  minHeight?: number;
   position: PopoverProps.Position;
   zIndex?: React.CSSProperties['zIndex'];
   arrow: (position: InternalPosition | null) => React.ReactNode;
@@ -51,6 +52,7 @@ export default function PopoverContainer({
   trackRef,
   getTrack: externalGetTrack,
   trackKey,
+  minHeight,
   arrow,
   children,
   zIndex,
@@ -96,6 +98,7 @@ export default function PopoverContainer({
       renderWithPortal,
       keepPosition,
       hideOnOverscroll,
+      minHeight,
     });
 
   // Recalculate position when properties change.

src/popover/use-popover-position.ts

@@ -27,6 +27,7 @@ export default function usePopoverPosition({
   renderWithPortal,
   keepPosition,
   hideOnOverscroll,
+  minHeight,
 }: {
   popoverRef: React.RefObject<HTMLDivElement | null>;
   bodyRef: React.RefObject<HTMLDivElement | null>;
@@ -39,6 +40,7 @@ export default function usePopoverPosition({
   renderWithPortal?: boolean;
   keepPosition?: boolean;
   hideOnOverscroll?: boolean;
+  minHeight?: number;
 }) {
   const previousInternalPositionRef = useRef<InternalPosition | null>(null);
   const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});
@@ -130,6 +132,7 @@ export default function usePopoverPosition({
         viewport: viewportRect,
         renderWithPortal,
         allowVerticalOverflow,
+        minHeight,
       });
 
       // Get the position of the popover relative to the containing block.
@@ -212,6 +215,7 @@ export default function usePopoverPosition({
       allowVerticalOverflow,
       allowScrollToFit,
       hideOnOverscroll,
+      minHeight,
     ]
   );
   return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling };

src/popover/utils/positions.ts

@@ -239,6 +239,7 @@ export function calculatePosition({
   // the popover is only bound by the viewport if it is rendered in a portal
   renderWithPortal,
   allowVerticalOverflow,
+  minHeight,
 }: {
   preferredPosition: PopoverProps.Position;
   fixedInternalPosition?: InternalPosition;
@@ -250,6 +251,7 @@ export function calculatePosition({
   // the popover is only bound by the viewport if it is rendered in a portal
   renderWithPortal?: boolean;
   allowVerticalOverflow?: boolean;
+  minHeight?: number;
 }): CalculatedPosition {
   let bestOption: CandidatePosition | null = null;
 
@@ -265,11 +267,14 @@ export function calculatePosition({
       ? getIntersection([rect, viewport])
       : getIntersection([rect, viewport, container]);
 
-    const fitsWithoutOverflow =
-      visibleArea && visibleArea.inlineSize === body.inlineSize && visibleArea.blockSize === body.blockSize;
+    const fitsBlockSize =
+      minHeight === undefined
+        ? visibleArea && visibleArea.blockSize === body.blockSize
+        : visibleArea && visibleArea.blockSize >= minHeight;
+    const fitsWithoutOverflow = visibleArea && visibleArea.inlineSize === body.inlineSize && fitsBlockSize;
 
     if (fitsWithoutOverflow) {
-      return { internalPosition, rect };
+      return { internalPosition, rect, scrollable: visibleArea && visibleArea.blockSize < body.blockSize };
     }
 
     const newOption = { rect, internalPosition, visibleArea };