[@mantine/core] always try centering arrow on target for popover

mantinedev · Nov 26, 2022 · d15e5bd · d15e5bd
1 parent 9febdd1
commit d15e5bd
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 29 deletions.
diff --git a/src/mantine-core/src/Floating/FloatingArrow/FloatingArrow.tsx b/src/mantine-core/src/Floating/FloatingArrow/FloatingArrow.tsx
@@ -1,13 +1,11 @@
 import React, { forwardRef } from 'react';
-import { useMantineTheme } from '@mantine/styles';
 import { getArrowPositionStyles } from './get-arrow-position-styles';
 import { FloatingPosition } from '../types';
 
 interface FloatingArrowProps extends React.ComponentPropsWithoutRef<'div'> {
   withBorder: boolean;
   position: FloatingPosition;
   arrowSize: number;
-  arrowOffset: number;
   arrowRadius: number;
   arrowX: number;
   arrowY: number;
@@ -20,7 +18,6 @@ export const FloatingArrow = forwardRef<HTMLDivElement, FloatingArrowProps>(
       withBorder,
       position,
       arrowSize,
-      arrowOffset,
       arrowRadius,
       visible,
       arrowX,
@@ -29,8 +26,6 @@ export const FloatingArrow = forwardRef<HTMLDivElement, FloatingArrowProps>(
     },
     ref
   ) => {
-    const theme = useMantineTheme();
-
     if (!visible) {
       return null;
     }
@@ -43,9 +38,7 @@ export const FloatingArrow = forwardRef<HTMLDivElement, FloatingArrowProps>(
           withBorder,
           position,
           arrowSize,
-          arrowOffset,
           arrowRadius,
-          dir: theme.dir,
           arrowX,
           arrowY,
         })}

diff --git a/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts b/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts
@@ -4,18 +4,17 @@ import type { FloatingPosition, FloatingSide, FloatingPlacement } from '../types
 function horizontalSide(
   placement: FloatingPlacement | 'center',
   arrowY: number,
-  arrowOffset: number
 ) {
   if (placement === 'center') {
     return { top: arrowY };
   }
 
   if (placement === 'end') {
-    return { bottom: arrowOffset };
+    return { top: arrowY };
   }
 
   if (placement === 'start') {
-    return { top: arrowOffset };
+    return { top: arrowY };
   }
 
   return {};
@@ -24,19 +23,17 @@ function horizontalSide(
 function verticalSide(
   placement: FloatingPlacement | 'center',
   arrowX: number,
-  arrowOffset: number,
-  dir: 'rtl' | 'ltr'
 ) {
   if (placement === 'center') {
-    return { [dir === 'ltr' ? 'left' : 'right']: arrowX };
+    return { left: arrowX };
   }
 
   if (placement === 'end') {
-    return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };
+    return { left: arrowX };
   }
 
   if (placement === 'start') {
-    return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };
+    return { left: arrowX };
   }
 
   return {};
@@ -62,20 +59,16 @@ export function getArrowPositionStyles({
   position,
   withBorder,
   arrowSize,
-  arrowOffset,
   arrowRadius,
   arrowX,
   arrowY,
-  dir,
 }: {
   position: FloatingPosition;
   withBorder: boolean;
   arrowSize: number;
-  arrowOffset: number;
   arrowRadius: number;
   arrowX: number;
   arrowY: number;
-  dir: 'rtl' | 'ltr';
 }) {
   const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];
   const baseStyles = {
@@ -91,7 +84,7 @@ export function getArrowPositionStyles({
   if (side === 'left') {
     return {
       ...baseStyles,
-      ...horizontalSide(placement, arrowY, arrowOffset),
+      ...horizontalSide(placement, arrowY),
       right: arrowPosition,
       borderLeft: 0,
       borderBottom: 0,
@@ -101,7 +94,7 @@ export function getArrowPositionStyles({
   if (side === 'right') {
     return {
       ...baseStyles,
-      ...horizontalSide(placement, arrowY, arrowOffset),
+      ...horizontalSide(placement, arrowY),
       left: arrowPosition,
       borderRight: 0,
       borderTop: 0,
@@ -111,20 +104,20 @@ export function getArrowPositionStyles({
   if (side === 'top') {
     return {
       ...baseStyles,
-      ...verticalSide(placement, arrowX, arrowOffset, dir),
+      ...verticalSide(placement, arrowX),
       bottom: arrowPosition,
       borderTop: 0,
-      [dir === 'ltr' ? 'borderLeft' : 'borderRight']: 0,
+      borderLeft: 0,
     };
   }
 
   if (side === 'bottom') {
     return {
       ...baseStyles,
-      ...verticalSide(placement, arrowX, arrowOffset, dir),
+      ...verticalSide(placement, arrowX),
       top: arrowPosition,
       borderBottom: 0,
-      [dir === 'ltr' ? 'borderRight' : 'borderLeft']: 0,
+      borderRight: 0,
     };
   }
 

diff --git a/src/mantine-core/src/Popover/Popover.context.ts b/src/mantine-core/src/Popover/Popover.context.ts
@@ -21,7 +21,6 @@ interface PopoverContext {
   width?: PopoverWidth;
   withArrow: boolean;
   arrowSize: number;
-  arrowOffset: number;
   arrowRadius: number;
   trapFocus: boolean;
   placement: FloatingPosition;

diff --git a/src/mantine-core/src/Popover/Popover.tsx b/src/mantine-core/src/Popover/Popover.tsx
@@ -201,6 +201,7 @@ export function Popover(props: PopoverProps) {
     position: getFloatingPosition(theme.dir, position),
     offset: offset + (withArrow ? arrowSize / 2 : 0),
     arrowRef,
+    arrowOffset,
     onPositionChange,
     positionDependencies,
     opened,
@@ -257,7 +258,6 @@ export function Popover(props: PopoverProps) {
           width,
           withArrow,
           arrowSize,
-          arrowOffset,
           arrowRadius,
           placement: popover.floating.placement,
           trapFocus,

diff --git a/src/mantine-core/src/Popover/PopoverDropdown/PopoverDropdown.tsx b/src/mantine-core/src/Popover/PopoverDropdown/PopoverDropdown.tsx
@@ -63,6 +63,7 @@ export function PopoverDropdown({
             <Box
               {...accessibleProps}
               tabIndex={-1}
+              key={ctx.placement}
               ref={ctx.floating}
               style={{
                 ...style,
@@ -92,7 +93,6 @@ export function PopoverDropdown({
                 position={ctx.placement}
                 arrowSize={ctx.arrowSize}
                 arrowRadius={ctx.arrowRadius}
-                arrowOffset={ctx.arrowOffset}
                 className={classes.arrow}
               />
             </Box>

diff --git a/src/mantine-core/src/Popover/use-popover.ts b/src/mantine-core/src/Popover/use-popover.ts
@@ -26,6 +26,7 @@ interface UsePopoverOptions {
   width: PopoverWidth;
   middlewares: PopoverMiddlewares;
   arrowRef: React.RefObject<HTMLDivElement>;
+  arrowOffset: number;
 }
 
 function getPopoverMiddlewares(options: UsePopoverOptions) {
@@ -43,7 +44,7 @@ function getPopoverMiddlewares(options: UsePopoverOptions) {
     middlewares.push(inline());
   }
 
-  middlewares.push(arrow({ element: options.arrowRef }));
+  middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));
 
   return middlewares;
 }