Merge pull request #91 from medusajs/fix/dropdown-menu-collision

fix: dropdown menu collision

packages/ui/src/components/dropdown-menu/dropdown-menu.tsx

@@ -42,12 +42,13 @@ SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"
 const SubMenuContent = React.forwardRef<
   React.ElementRef<typeof Primitives.SubContent>,
   React.ComponentPropsWithoutRef<typeof Primitives.SubContent>
->(({ className, ...props }, ref) => (
+>(({ className, collisionPadding = 8, ...props }, ref) => (
   <Primitives.Portal>
     <Primitives.SubContent
       ref={ref}
+      collisionPadding={collisionPadding}
       className={clx(
-        "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout min-w-[8rem] overflow-hidden rounded-lg border p-1",
+        "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[8rem] overflow-hidden rounded-lg border p-1",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -60,21 +61,33 @@ SubMenuContent.displayName = "DropdownMenu.SubMenuContent"
 const Content = React.forwardRef<
   React.ElementRef<typeof Primitives.Content>,
   React.ComponentPropsWithoutRef<typeof Primitives.Content>
->(({ className, sideOffset = 8, align = "start", ...props }, ref) => (
-  <Primitives.Portal>
-    <Primitives.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      align={align}
-      className={clx(
-        "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout min-w-[300px] overflow-hidden rounded-lg p-1",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </Primitives.Portal>
-))
+>(
+  (
+    {
+      className,
+      sideOffset = 8,
+      collisionPadding = 8,
+      align = "start",
+      ...props
+    },
+    ref
+  ) => (
+    <Primitives.Portal>
+      <Primitives.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        align={align}
+        collisionPadding={collisionPadding}
+        className={clx(
+          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[300px] overflow-hidden rounded-lg p-1",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </Primitives.Portal>
+  )
+)
 Content.displayName = "DropdownMenu.Content"
 
 const Item = React.forwardRef<

yarn.lock

@@ -7477,7 +7477,7 @@ __metadata:
 
 "class-variance-authority@patch:class-variance-authority@npm%3A0.6.1#./.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch::locator=medusa-ui%40workspace%3A.":
   version: 0.6.1
-  resolution: "class-variance-authority@patch:class-variance-authority@npm%3A0.6.1#./.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch::version=0.6.1&hash=4a9eff&locator=medusa-ui%40workspace%3A."
+  resolution: "class-variance-authority@patch:class-variance-authority@npm%3A0.6.1#./.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch::version=0.6.1&hash=1b9fe4&locator=medusa-ui%40workspace%3A."
   dependencies:
     clsx: 1.2.1
   checksum: 095af67867a627d20fcd214172afbd4a25350f7852078f1966d74692926c5832e2a20c8746724d514dbeab210252e82775bff2257fcf8e40f99c3d6e5fcfc445
@@ -9642,7 +9642,7 @@ __metadata:
 
 "fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
   dependencies:
     node-gyp: latest
   conditions: os=darwin
@@ -13700,7 +13700,7 @@ __metadata:
 
 "resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>":
   version: 1.22.4
-  resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin<compat/resolve>::version=1.22.4&hash=07638b"
+  resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin<compat/resolve>::version=1.22.4&hash=c3c19d"
   dependencies:
     is-core-module: ^2.13.0
     path-parse: ^1.0.7
@@ -13713,7 +13713,7 @@ __metadata:
 
 "resolve@patch:resolve@^2.0.0-next.4#~builtin<compat/resolve>":
   version: 2.0.0-next.4
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=07638b"
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
   dependencies:
     is-core-module: ^2.9.0
     path-parse: ^1.0.7
@@ -15446,7 +15446,7 @@ __metadata:
 
 "typescript@patch:[email protected]#~builtin<compat/typescript>, typescript@patch:typescript@^5.1.6#~builtin<compat/typescript>":
   version: 5.1.6
-  resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin<compat/typescript>::version=5.1.6&hash=7ad353"
+  resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin<compat/typescript>::version=5.1.6&hash=77c9e2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver