From cf62a0a43cf015e69bfcc31322c9461ddf5d9844 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Tue, 14 Jan 2025 12:08:59 +0200
Subject: [PATCH] docs: handle step tooltip bug in safari (#10954)

---
 .../WorkflowDiagram/Common/Node/index.tsx     | 17 ++++++--
 .../docs-ui/src/utils/get-os-shortcut.ts      |  8 ----
 www/packages/docs-ui/src/utils/index.ts       |  2 +-
 .../docs-ui/src/utils/os-browser-utils.ts     | 39 +++++++++++++++++++
 4 files changed, 54 insertions(+), 12 deletions(-)
 delete mode 100644 www/packages/docs-ui/src/utils/get-os-shortcut.ts
 create mode 100644 www/packages/docs-ui/src/utils/os-browser-utils.ts

diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
index 3c839e3693143..c3f489192aea2 100644
--- a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
+++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
@@ -7,6 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react"
 import { WorkflowStepUi } from "types"
 import { InlineCode, MarkdownContent, Tooltip } from "../../.."
 import { Bolt, InformationCircle } from "@medusajs/icons"
+import { getBrowser } from "../../../../utils"
 
 export type WorkflowDiagramNodeProps = {
   step: WorkflowStepUi
@@ -34,12 +35,22 @@ export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => {
       return
     }
 
+    const firstChild = nodeParent.firstChild as HTMLElement
+
     const nodeBoundingRect = nodeParent.getBoundingClientRect()
     const diagramBoundingRect = diagramParent.getBoundingClientRect()
+    const browser = getBrowser()
 
-    setOffset(
-      Math.max(diagramBoundingRect.width - nodeBoundingRect.width + 10, 10)
-    )
+    if (browser === "Safari") {
+      // React Tooltip has a bug in Safari where the offset is not calculated correctly
+      // when place is set.
+      const firstChildBoundingRect = firstChild.getBoundingClientRect()
+      setOffset(diagramBoundingRect.width - firstChildBoundingRect.width + 20)
+    } else {
+      setOffset(
+        Math.max(diagramBoundingRect.width - nodeBoundingRect.width + 10, 10)
+      )
+    }
   }, [ref.current])
 
   return (
diff --git a/www/packages/docs-ui/src/utils/get-os-shortcut.ts b/www/packages/docs-ui/src/utils/get-os-shortcut.ts
deleted file mode 100644
index e1e4cb3f1e572..0000000000000
--- a/www/packages/docs-ui/src/utils/get-os-shortcut.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function getOsShortcut() {
-  const isMacOs =
-    typeof navigator !== "undefined"
-      ? navigator.userAgent.toLowerCase().indexOf("mac") !== 0
-      : true
-
-  return isMacOs ? "⌘" : "Ctrl"
-}
diff --git a/www/packages/docs-ui/src/utils/index.ts b/www/packages/docs-ui/src/utils/index.ts
index 4dda81c98a4e5..ab26e6101edc0 100644
--- a/www/packages/docs-ui/src/utils/index.ts
+++ b/www/packages/docs-ui/src/utils/index.ts
@@ -5,7 +5,7 @@ export * from "./decode-str"
 export * from "./dom-utils"
 export * from "./get-link-with-base-path"
 export * from "./get-navbar-items"
-export * from "./get-os-shortcut"
+export * from "./os-browser-utils"
 export * from "./get-scrolled-top"
 export * from "./is-elm-window"
 export * from "./is-in-view"
diff --git a/www/packages/docs-ui/src/utils/os-browser-utils.ts b/www/packages/docs-ui/src/utils/os-browser-utils.ts
new file mode 100644
index 0000000000000..f4059313f4ffe
--- /dev/null
+++ b/www/packages/docs-ui/src/utils/os-browser-utils.ts
@@ -0,0 +1,39 @@
+export function getBrowser():
+  | "Chrome"
+  | "Safari"
+  | "Firefox"
+  | "Internet Explorer"
+  | "Edge"
+  | "unknown" {
+  if (typeof navigator === "undefined") {
+    return "unknown"
+  }
+
+  const userAgent = navigator.userAgent.toLowerCase()
+
+  if (userAgent.indexOf("chrome") > -1) {
+    return "Chrome"
+  } else if (userAgent.indexOf("safari") > -1) {
+    return "Safari"
+  } else if (userAgent.indexOf("firefox") > -1) {
+    return "Firefox"
+  } else if (
+    userAgent.indexOf("msie") > -1 ||
+    userAgent.indexOf("trident") > -1
+  ) {
+    return "Internet Explorer"
+  } else if (userAgent.indexOf("edge") > -1) {
+    return "Edge"
+  } else {
+    return "unknown"
+  }
+}
+
+export function getOsShortcut() {
+  const isMacOs =
+    typeof navigator !== "undefined"
+      ? navigator.userAgent.toLowerCase().indexOf("mac") !== 0
+      : true
+
+  return isMacOs ? "⌘" : "Ctrl"
+}