@jinaan/uikit 0.1.52 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.52",
+  "version": "0.1.55",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -77,11 +77,14 @@ export interface DataTableFilterOption {
 export interface DataTableFilter<T> {
   id: string;
   label: string;
-  options: DataTableFilterOption[];
+  options?: DataTableFilterOption[];
   value: string[];
   onChange: (value: string[]) => void;
   /** Return true when the row matches the selected filter values. */
   match: (row: T, values: string[]) => boolean;
+  /** Use text input instead of checkbox options. */
+  type?: "text" | "select";
+  placeholder?: string;
 }
 
 export interface BulkAction<T> {
@@ -684,39 +687,64 @@ export function DataTable<T>({
                       <FunnelSimple />
                       <span className="font-medium">{filter.label}</span>
                       <span className="h-4 w-px bg-line" aria-hidden />
-                      <span className="text-muted">
+                      <span className="text-muted max-w-28 truncate">
                         {filter.value.length > 0
-                          ? `${filter.value.length} selected`
+                          ? filter.type === "text"
+                            ? filter.value[0]
+                            : `${filter.value.length} selected`
                           : "Enter value"}
                       </span>
                       <CaretDown className="text-muted" />
                     </Button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="w-56">
+                  <DropdownMenuContent align="start" className={filter.type === "text" ? "w-72" : "w-56"}>
                     <DropdownMenuLabel className="text-[13px]">
                       Filter by {filter.label}
                     </DropdownMenuLabel>
-                    {filter.options.map((option) => {
-                      const checked = filter.value.includes(option.value);
-                      return (
-                        <DropdownMenuCheckboxItem
-                          key={option.value}
-                          checked={checked}
-                          onCheckedChange={() =>
-                            filter.onChange(
-                              checked
-                                ? filter.value.filter((value) => value !== option.value)
-                                : [...filter.value, option.value],
-                            )
-                          }
-                          onSelect={(e) => e.preventDefault()}
-                        >
-                          {option.label}
-                        </DropdownMenuCheckboxItem>
-                      );
-                    })}
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onSelect={clear}>Clear filter</DropdownMenuItem>
+                    {filter.type === "text" ? (
+                      <div className="px-1 pb-1">
+                        <Input
+                          value={filter.value[0] ?? ""}
+                          onChange={(e) => filter.onChange(e.target.value ? [e.target.value] : [])}
+                          onClear={filter.value[0] ? () => filter.onChange([]) : undefined}
+                          placeholder={filter.placeholder ?? `Search ${filter.label.toLowerCase()}...`}
+                          aria-label={filter.placeholder ?? `Search ${filter.label.toLowerCase()}...`}
+                          leadingIcon={<MagnifyingGlass className="size-3.5" />}
+                          size="sm"
+                          className="h-(--control-h-xs) border-0 bg-(--combobox-search-bg) focus-visible:border-muted focus-visible:ring-0"
+                        />
+                      </div>
+                    ) : (
+                      <>
+                        {(filter.options ?? []).map((option) => {
+                          const checked = filter.value.includes(option.value);
+                          return (
+                            <DropdownMenuCheckboxItem
+                              key={option.value}
+                              checked={checked}
+                              onCheckedChange={() =>
+                                filter.onChange(
+                                  checked
+                                    ? filter.value.filter((value) => value !== option.value)
+                                    : [...filter.value, option.value],
+                                )
+                              }
+                              onSelect={(e) => e.preventDefault()}
+                            >
+                              {option.label}
+                            </DropdownMenuCheckboxItem>
+                          );
+                        })}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onSelect={clear}>Clear filter</DropdownMenuItem>
+                      </>
+                    )}
+                    {filter.type === "text" ? (
+                      <>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onSelect={clear}>Clear filter</DropdownMenuItem>
+                      </>
+                    ) : null}
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>

package/styles.css

@@ -100,7 +100,7 @@
   --input-border-hover: #c7c7cf;
   --input-border-focus: var(--primary);
   --input-bg-disabled: #f6f6f7;
-  --combobox-search-bg: rgb(32, 32, 35);
+  --combobox-search-bg: rgb(245, 245, 246);
 
   /* Button surfaces. */
   --button-primary-bg: var(--primary);