From 4f6362b1cb1b84f01cc4cd277981aae7ae5797c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Tue, 29 Apr 2025 12:13:12 +0200
Subject: [PATCH] fix(design-system): filter/sorting menu error (#12309)

---
 .changeset/perfect-penguins-pay.md              |  5 +++++
 .../components/data-table-filter-menu.tsx       |  6 ++++--
 .../components/data-table-sorting-menu.tsx      | 17 ++++++++++++-----
 3 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/perfect-penguins-pay.md

diff --git a/.changeset/perfect-penguins-pay.md b/.changeset/perfect-penguins-pay.md
new file mode 100644
index 0000000000..e3c0e44d25
--- /dev/null
+++ b/.changeset/perfect-penguins-pay.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(design-system): filter/sorting menu tooltip error
diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-menu.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-menu.tsx
index 94732638b3..9a9c8507fd 100644
--- a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-menu.tsx
+++ b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-menu.tsx
@@ -34,6 +34,9 @@ const DataTableFilterMenu = (props: DataTableFilterMenuProps) => {
   }
 
   const Wrapper = props.tooltip ? Tooltip : React.Fragment
+  const wrapperProps = props.tooltip
+    ? { content: props.tooltip, hidden: filterOptions.length === 0 }
+    : ({} as any)
 
   if (instance.showSkeleton) {
     return <DataTableFilterMenuSkeleton />
@@ -41,7 +44,7 @@ const DataTableFilterMenu = (props: DataTableFilterMenuProps) => {
 
   return (
     <DropdownMenu>
-      <Wrapper content={props.tooltip} hidden={filterOptions.length === 0}>
+      <Wrapper {...wrapperProps}>
         <DropdownMenu.Trigger asChild disabled={filterOptions.length === 0}>
           <IconButton size="small">
             <Funnel />
@@ -71,4 +74,3 @@ const DataTableFilterMenuSkeleton = () => {
 
 export { DataTableFilterMenu }
 export type { DataTableFilterMenuProps }
-
diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-sorting-menu.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-sorting-menu.tsx
index 1bc63f3c8a..49b9259f48 100644
--- a/packages/design-system/ui/src/blocks/data-table/components/data-table-sorting-menu.tsx
+++ b/packages/design-system/ui/src/blocks/data-table/components/data-table-sorting-menu.tsx
@@ -1,7 +1,10 @@
 "use client"
 
 import { useDataTableContext } from "@/blocks/data-table/context/use-data-table-context"
-import { DataTableColumn, DataTableSortableColumnDefMeta } from "@/blocks/data-table/types"
+import {
+  DataTableColumn,
+  DataTableSortableColumnDefMeta,
+} from "@/blocks/data-table/types"
 import { DropdownMenu } from "@/components/dropdown-menu"
 import { IconButton } from "@/components/icon-button"
 import { Skeleton } from "@/components/skeleton"
@@ -67,10 +70,11 @@ const DataTableSortingMenu = (props: DataTableSortingMenuProps) => {
   }
 
   const Wrapper = props.tooltip ? Tooltip : React.Fragment
+  const wrapperProps = props.tooltip ? { content: props.tooltip } : ({} as any)
 
   return (
     <DropdownMenu>
-      <Wrapper content={props.tooltip}>
+      <Wrapper {...wrapperProps}>
         <DropdownMenu.Trigger asChild>
           <IconButton size="small">
             <DescendingSorting />
@@ -124,7 +128,9 @@ const DataTableSortingMenu = (props: DataTableSortingMenuProps) => {
 DataTableSortingMenu.displayName = "DataTable.SortingMenu"
 
 function getSortLabel(column: DataTableColumn<any, unknown>) {
-  const meta = column.columnDef.meta as DataTableSortableColumnDefMeta | undefined
+  const meta = column.columnDef.meta as
+    | DataTableSortableColumnDefMeta
+    | undefined
   let headerValue: string | undefined = undefined
 
   if (typeof column.columnDef.header === "string") {
@@ -142,7 +148,9 @@ function getSortDescriptor(
     return null
   }
 
-  const meta = column.columnDef.meta as DataTableSortableColumnDefMeta | undefined
+  const meta = column.columnDef.meta as
+    | DataTableSortableColumnDefMeta
+    | undefined
 
   switch (direction) {
     case "asc":
@@ -158,4 +166,3 @@ const DataTableSortingMenuSkeleton = () => {
 
 export { DataTableSortingMenu }
 export type { DataTableSortingMenuProps }
-