fix: Fix broken secondary placement for Arrow

src/PopOver/Arrow.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef, useMemo} from 'react';
 
 import getArrowPosition, {getPlacements} from './getArrowPosition';
 
@@ -9,33 +9,42 @@ const transformMap = {
 	left: 'translateX(-50%) rotate(45deg)',
 };
 
-const getArrowStyles = (primaryPlacement, arrowSize) => {
-	return {
-		position: 'absolute',
+function useArrowStyles(primaryPlacement, arrowSize) {
+	const arrowStyles = useMemo(
+		() => ({
+			position: 'absolute',
 
-		display: 'inline-block',
-		width: arrowSize + 'px',
-		height: arrowSize + 'px',
+			display: 'inline-block',
+			width: arrowSize + 'px',
+			height: arrowSize + 'px',
 
-		backgroundColor: 'inherit',
-		border: 'inherit',
-		borderLeftColor: 'transparent',
-		borderBottomColor: 'transparent',
+			backgroundColor: 'inherit',
+			border: 'inherit',
+			borderLeftColor: 'transparent',
+			borderBottomColor: 'transparent',
 
-		transform: transformMap[primaryPlacement],
-		transformOrigin: '50%',
-		clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
-	};
-};
+			transform: transformMap[primaryPlacement],
+			transformOrigin: '50%',
+			clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
+		}),
+		[arrowSize, primaryPlacement]
+	);
+
+	return arrowStyles;
+}
 
-const Arrow = React.forwardRef((props, ref) => {
+const Arrow = forwardRef((props, ref) => {
 	const {placement, size, style} = props;
 
 	const [primaryPlacement] = getPlacements(placement);
-	const baseArrowStyles = getArrowStyles(primaryPlacement, size);
-	const defaultArrowPosition = getArrowPosition(placement, {
-		centerOffset: `-${size / 2}px`,
-	});
+	const baseArrowStyles = useArrowStyles(primaryPlacement, size);
+	const defaultArrowPosition = useMemo(
+		() =>
+			getArrowPosition(placement, {
+				centerOffset: `-${size / 2}px`,
+			}),
+		[placement, size]
+	);
 	// Don't let an empty primary position attribute reset the default
 	if (style && style[primaryPlacement] === '') {
 		delete style[primaryPlacement];

src/PopOver/README.mdx

@@ -29,18 +29,19 @@ It's a wrapper around `react-popper`.
 
 <Props of={PopOver} />
 
-# Using the Arrow Components
+## Using just the Arrow component
 
-The Arrow component is a tooltip "arrow" that can be dropped into any container element and will inherit its styling.
+The Arrow component is a tooltip "arrow" that can be dropped into any container element. It will then inherit the container's styling and can be positioned using a normal popper.js placement string (e.g. `left`, `top-start`, `right-end`).
 
-It accepts a placement string formatted in the style of popper.js (i.e. `left`, `top-start`, `right-end`) and will position itself on the opposing side of its parent element. For this to work, the parent element needs to have a position other than 'static', e.g. 'relative', 'absolute', or 'fixed'.
+For the positioning to work, the parent element needs to have a position other than `static`, e.g. `relative`, `absolute`, or `fixed`.
 
 Use the `size` prop to adjust the arrow's size (in pixels).
 
 <Playground>
 	<div
 		style={{
 			position: 'relative',
+			width: 250,
 			padding: 8,
 			backgroundColor: 'grey',
 			color: 'white',
@@ -49,6 +50,6 @@ Use the `size` prop to adjust the arrow's size (in pixels).
 		}}
 	>
 		Hello, I'm a box with a pointy arrow.
-		<Arrow placement="bottom-start" size={12} />
+		<Arrow placement="top-end" size={10} />
 	</div>
 </Playground>

src/PopOver/getArrowPosition.js

@@ -2,7 +2,7 @@
  * returns a CSS style object containing sensible default
  * styles for the placement string.
  *
- * The values can be customised, but default to:
+ * The (customisable) defaults are:
  * - 100% for the primary direction
  * - 8 pixels for the secondary direction
  *
@@ -40,10 +40,14 @@ function getArrowPosition(
 	{defaultPrimaryValue = '100%', defaultSecondaryValue = 8, centerOffset}
 ) {
 	const [primaryPlacement, secondaryPlacement] = getPlacements(placement);
+	const secondaryDirection = getSecondaryDirection(
+		primaryPlacement,
+		secondaryPlacement
+	);
 
 	return {
 		[primaryPlacement]: defaultPrimaryValue,
-		[getSecondaryDirection(secondaryPlacement)]: secondaryPlacement
+		[secondaryDirection]: secondaryPlacement
 			? defaultSecondaryValue
 			: centerOffset
 			? `calc(50% + ${centerOffset})`