Remove strings from Popover placement prop that throw errors #2218

.changeset/gold-jeans-repeat.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tooltip": minor
+---
+
+Removing unusable strings from union in Popover's `placement` prop

packages/wonder-blocks-tooltip/src/components/tooltip-popper.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 import {Popper} from "react-popper";
 import type {PopperChildrenProps} from "react-popper";
 
+import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 import RefTracker from "../util/ref-tracker";
 import type {
     Placement,
@@ -35,6 +36,34 @@ type Props = {
     autoUpdate?: boolean;
 };
 
+const filterPopperPlacement = (
+    placement: PopperChildrenProps["placement"],
+): Placement => {
+    switch (placement) {
+        case "auto":
+        case "auto-start":
+        case "auto-end":
+        case "top":
+        case "top-start":
+        case "top-end":
+            return "top";
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+            return "bottom";
+        case "right":
+        case "right-start":
+        case "right-end":
+            return "right";
+        case "left":
+        case "left-start":
+        case "left-end":
+            return "left";
+        default:
+            throw new UnreachableCaseError(placement);
+    }
+};
+
 /**
  * A component that wraps react-popper's Popper component to provide a
  * consistent interface for positioning floating elements.
@@ -100,7 +129,8 @@ export default class TooltipPopper extends React.Component<Props> {
         // We'll hide some complexity from the children here and ensure
         // that our placement always has a value.
         const placement: Placement =
-            popperProps.placement || this.props.placement;
+            filterPopperPlacement(popperProps.placement) ||
+            this.props.placement;
 
         // Just in case the callbacks have changed, let's update our reference
         // trackers.

packages/wonder-blocks-tooltip/src/util/types.ts

@@ -16,22 +16,7 @@ export type Offset = {
     transform: CSSProperties["transform"];
 };
 
-export type Placement =
-    | "auto"
-    | "auto-start"
-    | "auto-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "left"
-    | "left-start"
-    | "left-end";
+export type Placement = "top" | "bottom" | "right" | "left";
 
 /**
  * Subset of CSS properties to allow overriding some of the default styles