@izumisy-tailor/tailor-data-viewer 0.1.38 → 0.1.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.38",
+  "version": "0.1.39",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/variation-filter.tsx

@@ -12,7 +12,6 @@ import type { VariationFilter } from "./types";
 import { useDataViewer } from "./contexts";
 import { useLabels } from "./hooks/use-labels";
 import { QueryBuilder } from "raku-ql";
-import { cn } from "./lib/utils";
 
 /**
  * Convert camelCase to PascalCase
@@ -216,33 +215,27 @@ export function VariationFilterForm({
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
-      <div className="flex items-center">
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="outline"
-            size="sm"
-            className={cn("gap-1.5", currentFilter && "rounded-r-none")}
-          >
-            {buttonLabel}
-            {currentFilter ? (
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1.5">
+          {buttonLabel}
+          {currentFilter ? (
+            <>
               <Badge variant="secondary" className="ml-0.5 px-1.5 py-0 text-xs">
                 {currentFilter.value}
               </Badge>
-            ) : null}
+              <span
+                role="button"
+                className="hover:bg-muted -mr-1 ml-0.5 rounded p-0.5"
+                onClick={handleClearFilter}
+              >
+                <X className="size-3" />
+              </span>
+            </>
+          ) : (
             <ChevronDown className="size-3 opacity-50" />
-          </Button>
-        </DropdownMenuTrigger>
-        {currentFilter && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-l-none border-l-0 px-1.5"
-            onClick={handleClearFilter}
-          >
-            <X className="size-3" />
-          </Button>
-        )}
-      </div>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
 
       <DropdownMenuContent
         align="start"