fix(design-system): filter/sorting menu error (#12309)

.changeset/perfect-penguins-pay.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(design-system): filter/sorting menu tooltip error

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 }
-

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 }
-