From a80de1fbef0cc58335c664e8bd4aadd63a82b33f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20van=20der=20Sande?= Date: Sat, 26 Nov 2022 11:14:32 +0100 Subject: [PATCH] [@mantine/core] always try centering arrow on target for popover --- .../Floating/FloatingArrow/FloatingArrow.tsx | 21 +------ .../get-arrow-position-styles.ts | 59 +++---------------- .../src/Popover/Popover.context.ts | 1 - src/mantine-core/src/Popover/Popover.tsx | 2 +- .../PopoverDropdown/PopoverDropdown.tsx | 2 +- src/mantine-core/src/Popover/use-popover.ts | 3 +- 6 files changed, 12 insertions(+), 76 deletions(-) diff --git a/src/mantine-core/src/Floating/FloatingArrow/FloatingArrow.tsx b/src/mantine-core/src/Floating/FloatingArrow/FloatingArrow.tsx index 541e8f0ce28..2dbaf9f9681 100644 --- a/src/mantine-core/src/Floating/FloatingArrow/FloatingArrow.tsx +++ b/src/mantine-core/src/Floating/FloatingArrow/FloatingArrow.tsx @@ -1,5 +1,4 @@ import React, { forwardRef } from 'react'; -import { useMantineTheme } from '@mantine/styles'; import { getArrowPositionStyles } from './get-arrow-position-styles'; import { FloatingPosition } from '../types'; @@ -7,7 +6,6 @@ interface FloatingArrowProps extends React.ComponentPropsWithoutRef<'div'> { withBorder: boolean; position: FloatingPosition; arrowSize: number; - arrowOffset: number; arrowRadius: number; arrowX: number; arrowY: number; @@ -15,22 +13,7 @@ interface FloatingArrowProps extends React.ComponentPropsWithoutRef<'div'> { } export const FloatingArrow = forwardRef( - ( - { - withBorder, - position, - arrowSize, - arrowOffset, - arrowRadius, - visible, - arrowX, - arrowY, - ...others - }, - ref - ) => { - const theme = useMantineTheme(); - + ({ withBorder, position, arrowSize, arrowRadius, visible, arrowX, arrowY, ...others }, ref) => { if (!visible) { return null; } @@ -43,9 +26,7 @@ export const FloatingArrow = forwardRef( 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 index 39f5cee574d..946440ef508 100644 --- a/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts +++ b/src/mantine-core/src/Floating/FloatingArrow/get-arrow-position-styles.ts @@ -1,47 +1,6 @@ import { CSSObject } from '@mantine/styles'; 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 }; - } - - if (placement === 'start') { - return { top: arrowOffset }; - } - - return {}; -} - -function verticalSide( - placement: FloatingPlacement | 'center', - arrowX: number, - arrowOffset: number, - dir: 'rtl' | 'ltr' -) { - if (placement === 'center') { - return { [dir === 'ltr' ? 'left' : 'right']: arrowX }; - } - - if (placement === 'end') { - return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset }; - } - - if (placement === 'start') { - return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset }; - } - - return {}; -} - const radiusByFloatingSide: Record< FloatingSide, keyof Pick< @@ -62,22 +21,18 @@ 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 [side] = position.split('-') as [FloatingSide, FloatingPlacement]; const baseStyles = { width: arrowSize, height: arrowSize, @@ -91,7 +46,7 @@ export function getArrowPositionStyles({ if (side === 'left') { return { ...baseStyles, - ...horizontalSide(placement, arrowY, arrowOffset), + top: arrowY, right: arrowPosition, borderLeft: 0, borderBottom: 0, @@ -101,7 +56,7 @@ export function getArrowPositionStyles({ if (side === 'right') { return { ...baseStyles, - ...horizontalSide(placement, arrowY, arrowOffset), + top: arrowY, left: arrowPosition, borderRight: 0, borderTop: 0, @@ -111,20 +66,20 @@ export function getArrowPositionStyles({ if (side === 'top') { return { ...baseStyles, - ...verticalSide(placement, arrowX, arrowOffset, dir), + left: arrowX, bottom: arrowPosition, borderTop: 0, - [dir === 'ltr' ? 'borderLeft' : 'borderRight']: 0, + borderLeft: 0, }; } if (side === 'bottom') { return { ...baseStyles, - ...verticalSide(placement, arrowX, arrowOffset, dir), + left: 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 index 3529d2d5b33..bd60e5a1ec9 100644 --- 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 index 2fd238d14c5..3098bf1c6da 100644 --- 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 index 1f43b5d52c9..7de4fd290dd 100644 --- 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({ diff --git a/src/mantine-core/src/Popover/use-popover.ts b/src/mantine-core/src/Popover/use-popover.ts index e1f6b58309c..ab4dad9337e 100644 --- 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; + 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; }