@izumisy-tailor/tailor-data-viewer 0.1.18 → 0.1.19

package/package.json

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

package/src/component/data-table-toolbar.test.tsx

@@ -110,16 +110,24 @@ describe("DataTableToolbar", () => {
       });
       await user.click(searchButton);
 
-      // 検索パネルが開き、カラム選択パネルが閉じることを確認
+      // カラム選択パネルが閉じることを確認
       await waitFor(() => {
         const body = within(document.body);
-        expect(body.getByText("検索フィルター")).toBeInTheDocument();
         expect(body.queryByText("全選択")).not.toBeInTheDocument();
       });
+
+      // 検索パネルを開く（もう一度クリックが必要な場合）
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      // 検索パネルが開くことを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
     });
 
     it("検索パネルが開いている状態でカラム選択パネルを開くと検索パネルが閉じる", async () => {
-      const user = userEvent.setup();
+      const user = userEvent.setup({ pointerEventsCheck: 0 });
       render(<DataTableToolbar {...createDefaultProps()} />);
 
       // 検索パネルを開く
@@ -129,19 +137,27 @@ describe("DataTableToolbar", () => {
         expect(body.getByText("検索フィルター")).toBeInTheDocument();
       });
 
-      // カラム選択パネルを開く (検索パネルが開いていても通常アクセス可能だが一貫性のためhidden: trueを追加)
+      // カラム選択パネルを開く
       const columnButton = screen.getByRole("button", {
         name: /カラム選択/,
         hidden: true,
       });
       await user.click(columnButton);
 
-      // カラム選択パネルが開き、検索パネルが閉じることを確認
+      // 検索パネルが閉じることを確認
       await waitFor(() => {
         const body = within(document.body);
-        expect(body.getByText("全選択")).toBeInTheDocument();
         expect(body.queryByText("検索フィルター")).not.toBeInTheDocument();
       });
+
+      // カラム選択パネルを開く（もう一度クリックが必要な場合）
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      // カラム選択パネルが開くことを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
     });
   });
 

package/src/component/search-filter.tsx

@@ -1,12 +1,5 @@
 import { useState, useCallback } from "react";
-import {
-  Search,
-  Plus,
-  X,
-  Filter,
-  ChevronDown,
-  ChevronRight,
-} from "lucide-react";
+import { Search, Plus, X, Filter } from "lucide-react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Checkbox } from "./ui/checkbox";
@@ -18,10 +11,10 @@ import {
   SelectValue,
 } from "./ui/select";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "./ui/collapsible";
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from "./ui/dropdown-menu";
 import { Badge } from "./ui/badge";
 import { Label } from "./ui/label";
 import type { FieldMetadata } from "../generator/metadata-generator";
@@ -64,11 +57,6 @@ export function SearchFilterForm({
   open,
   onOpenChange,
 }: SearchFilterProps) {
-  // Use controlled state if provided, otherwise use internal state
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isOpen = open !== undefined ? open : internalOpen;
-  const setIsOpen = onOpenChange ?? setInternalOpen;
-
   const [selectedField, setSelectedField] = useState<string>("");
   const [inputValue, setInputValue] = useState<string>("");
   const [booleanValue, setBooleanValue] = useState<boolean>(false);
@@ -194,14 +182,9 @@ export function SearchFilterForm({
   const activeFilterCount = filters.length;
 
   return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="relative">
-      <CollapsibleTrigger asChild>
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm" className="gap-1">
-          {isOpen ? (
-            <ChevronDown className="size-4" />
-          ) : (
-            <ChevronRight className="size-4" />
-          )}
           <Search className="size-4" />
           検索
           {activeFilterCount > 0 && (
@@ -210,120 +193,118 @@ export function SearchFilterForm({
             </Badge>
           )}
         </Button>
-      </CollapsibleTrigger>
+      </DropdownMenuTrigger>
 
-      <CollapsibleContent className="absolute top-full left-0 z-50 mt-2">
-        <div className="bg-background w-96 rounded-md border p-4 shadow-md">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <Filter className="size-4" />
-                検索フィルター
-              </div>
-              {activeFilterCount > 0 && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-auto p-1 text-xs"
-                  onClick={handleClearAll}
-                >
-                  すべてクリア
-                </Button>
-              )}
+      <DropdownMenuContent align="start" className="w-96 p-4">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <Filter className="size-4" />
+              検索フィルター
             </div>
+            {activeFilterCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-auto p-1 text-xs"
+                onClick={handleClearAll}
+              >
+                すべてクリア
+              </Button>
+            )}
+          </div>
 
-            {/* Active filters */}
-            {filters.length > 0 && (
-              <div className="space-y-2">
-                <div className="text-muted-foreground text-xs">
-                  適用中のフィルター (AND)
-                </div>
-                <div className="flex flex-wrap gap-1">
-                  {filters.map((filter) => (
-                    <Badge
-                      key={filter.field}
-                      variant="secondary"
-                      className="flex items-center gap-1 pr-1"
+          {/* Active filters */}
+          {filters.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-muted-foreground text-xs">
+                適用中のフィルター (AND)
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {filters.map((filter) => (
+                  <Badge
+                    key={filter.field}
+                    variant="secondary"
+                    className="flex items-center gap-1 pr-1"
+                  >
+                    <span>
+                      {filter.field}=
+                      {typeof filter.value === "boolean"
+                        ? filter.value
+                          ? "true"
+                          : "false"
+                        : filter.value}
+                    </span>
+                    <button
+                      className="text-muted-foreground hover:text-foreground ml-1"
+                      onClick={() => handleRemoveFilter(filter.field)}
                     >
-                      <span>
-                        {filter.field}=
-                        {typeof filter.value === "boolean"
-                          ? filter.value
-                            ? "true"
-                            : "false"
-                          : filter.value}
-                      </span>
-                      <button
-                        className="text-muted-foreground hover:text-foreground ml-1"
-                        onClick={() => handleRemoveFilter(filter.field)}
-                      >
-                        <X className="size-3" />
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
+                      <X className="size-3" />
+                    </button>
+                  </Badge>
+                ))}
               </div>
-            )}
+            </div>
+          )}
 
-            {/* Add new filter */}
-            {filterableFields.length > 0 && (
-              <div className="space-y-3">
-                <div className="text-muted-foreground text-xs">
-                  フィルターを追加
-                </div>
+          {/* Add new filter */}
+          {filterableFields.length > 0 && (
+            <div className="space-y-3">
+              <div className="text-muted-foreground text-xs">
+                フィルターを追加
+              </div>
 
-                {/* Field selector */}
-                <Select value={selectedField} onValueChange={setSelectedField}>
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="フィールドを選択" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {filterableFields.map((field) => (
-                      <SelectItem key={field.name} value={field.name}>
-                        {field.name}{" "}
-                        <span className="text-muted-foreground">
-                          ({field.type})
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              {/* Field selector */}
+              <Select value={selectedField} onValueChange={setSelectedField}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="フィールドを選択" />
+                </SelectTrigger>
+                <SelectContent>
+                  {filterableFields.map((field) => (
+                    <SelectItem key={field.name} value={field.name}>
+                      {field.name}{" "}
+                      <span className="text-muted-foreground">
+                        ({field.type})
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
 
-                {/* Value input - changes based on field type */}
-                {selectedField && (
-                  <div className="space-y-2">
-                    {renderFilterInput()}
-                    <Button
-                      size="sm"
-                      onClick={handleAddFilter}
-                      disabled={
-                        selectedFieldMetadata?.type !== "boolean" &&
-                        !inputValue.trim()
-                      }
-                      className="w-full"
-                    >
-                      <Plus className="mr-1 size-3" />
-                      追加
-                    </Button>
-                  </div>
-                )}
-              </div>
-            )}
+              {/* Value input - changes based on field type */}
+              {selectedField && (
+                <div className="space-y-2">
+                  {renderFilterInput()}
+                  <Button
+                    size="sm"
+                    onClick={handleAddFilter}
+                    disabled={
+                      selectedFieldMetadata?.type !== "boolean" &&
+                      !inputValue.trim()
+                    }
+                    className="w-full"
+                  >
+                    <Plus className="mr-1 size-3" />
+                    追加
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
 
-            {filterableFields.length === 0 && filters.length === 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                フィルター可能なフィールドがありません
-              </div>
-            )}
+          {filterableFields.length === 0 && filters.length === 0 && (
+            <div className="text-muted-foreground py-2 text-center text-sm">
+              フィルター可能なフィールドがありません
+            </div>
+          )}
 
-            {filterableFields.length === 0 && filters.length > 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                すべてのフィールドにフィルターが適用されています
-              </div>
-            )}
-          </div>
+          {filterableFields.length === 0 && filters.length > 0 && (
+            <div className="text-muted-foreground py-2 text-center text-sm">
+              すべてのフィールドにフィルターが適用されています
+            </div>
+          )}
         </div>
-      </CollapsibleContent>
-    </Collapsible>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }