terrazzo 0.7.6 → 0.7.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2485c82e85ed664ba929d42f7aba8b3fd05d06c0c98f0e72cdf023108827c9b
-  data.tar.gz: 936dc1c90978c9e5a034ad1a99994eca021d09494bde07ffa08b452bf99b6641
+  metadata.gz: 7116e86ccb7f5bd1ba8309e966913c53746f4a6f7e7ff6461194c084b236697f
+  data.tar.gz: b1ff3fb03ce897c082df6977e919bedf667a9d0867e402ea7d720572d4bb5fb9
 SHA512:
-  metadata.gz: 2526b14b6bcd42a5d4eaee4ed9d3c6ce95a98f345a6e67ede0935e7fcdf7d455ce5afa1f012b52b26c9930706dcbd32dacb6062860f8a5cffac466045274db5e
-  data.tar.gz: 69b436459fb552a8569b1b9250f50335b9383c2bc7490d0ec9ce0c8c366c99b57f3c6d6fa9d44de21d5bb306192d6e80ae5ba6ab1cd4d25da4eb0b9e85046171
+  metadata.gz: 2dccc34e6589dee6e9a29ac78df787f405c35b841ddf4168fce78fc66afdc2616fe19a657cc751434f15ec703042452f7d1940b58fc6b86e8054a422a130e1b3
+  data.tar.gz: ff55728ffbe3d61cbafc4d6b41742363fe4efc3c9b15e17f5b68570fdec9def720018635450d931a7f247eca4ab2125e03248929d8f5078a3d878f3d9486b695

data/README.md

@@ -1,6 +1,6 @@
 # Terrazzo
 
-Association forms load selected values first. `HasMany` and `BelongsTo` use server search with pages of 25 options. Upgrade the gem and npm package together. Custom association form components must use the new option query contract; see [custom fields](docs/customizing-fields.md).
+Association forms load selected values first. `HasMany` and `BelongsTo` use typeahead search with at most 10 matches. Upgrade the gem and npm package together. Custom association form components must use the new option query contract; see [custom fields](docs/customizing-fields.md).
 
 A drop-in admin panel for Rails apps. Uses the [Administrate](https://github.com/thoughtbot/administrate) dashboard DSL with a React SPA frontend powered by [Superglue](https://github.com/thoughtbot/superglue).
 
@@ -33,7 +33,7 @@ npm install @radix-ui/react-avatar@1.1.11 @radix-ui/react-dialog@1.1.15 \
   @radix-ui/react-popover@1.1.15 @radix-ui/react-select@2.2.6 \
   @radix-ui/react-separator@1.1.8 @radix-ui/react-slot@1.2.4 \
   @radix-ui/react-tooltip@1.2.8 class-variance-authority@0.7.1 \
-  lucide-react@0.344.0 tailwindcss@4.2.1
+  cmdk@1.1.1 lucide-react@0.344.0 tailwindcss@4.2.1
 npm install --save-dev @tailwindcss/cli@4.2.1 # if your app does not already compile Tailwind
 
 # Install Terrazzo — generates admin namespace, app barrels,

data/app/controllers/terrazzo/application_controller.rb

@@ -282,7 +282,7 @@ module Terrazzo
       return head :not_found unless field.association_options?
 
       response.headers["Cache-Control"] = "no-store"
-      render json: field.association_options(search: params[:search], page: params[:page])
+      render json: field.association_options(search: params[:search])
     end
 
     def resolver

data/lib/generators/terrazzo/install/install_generator.rb

@@ -32,6 +32,7 @@ module Terrazzo
           @radix-ui/react-slot
           @radix-ui/react-tooltip
           class-variance-authority
+          cmdk
           lucide-react
         ] + [TAILWIND_PACKAGE_NAME]
       ).freeze
@@ -52,6 +53,7 @@ module Terrazzo
         "@radix-ui/react-slot" => "1.0.0",
         "@radix-ui/react-tooltip" => "1.0.0",
         "class-variance-authority" => "0.7.0",
+        "cmdk" => "1.1.1",
         "lucide-react" => "0.300.0",
         TAILWIND_PACKAGE_NAME => TAILWIND_MINIMUM_VERSION,
       }.freeze

data/lib/generators/terrazzo/views/templates/components/AssociationSelect.jsx

@@ -1,59 +1,53 @@
+import { Command } from "cmdk";
+import { Check, ChevronsUpDown, Loader2, Search, X } from "lucide-react";
 import React, { useEffect, useId, useState } from "react";
+import { cn } from "terrazzo";
 import { Label, Popover, PopoverContent, PopoverTrigger } from "./ui";
 
-export function AssociationSelect({
-  value,
-  options,
-  input,
-  label,
-  required,
-  multiple = false,
-  onChange,
-}) {
+export function AssociationSelect({ value, options, input, label, required, multiple = false, onChange }) {
   const popupId = useId();
+  const searchRef = React.useRef(null);
   const [selectedIds, setSelectedIds] = useState(() =>
-    (multiple
-      ? (value ?? [])
-      : value == null || value === ""
-        ? []
-        : [value]
-    ).map(String),
-  );
-  const [selectedOptions, setSelectedOptions] = useState(
-    options.resourceOptions,
+    (multiple ? (value ?? []) : value == null || value === "" ? [] : [value]).map(String)
   );
+  const [selectedOptions, setSelectedOptions] = useState(options.resourceOptions);
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [page, setPage] = useState(1);
-  const [result, setResult] = useState({ resourceOptions: [], hasMore: false });
+  const [result, setResult] = useState(null);
+  const [activeResultId, setActiveResultId] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [retry, setRetry] = useState(0);
+  const selected = selectedOptions.filter((option) => selectedIds.includes(option[1]));
+  const placeholder = `Select ${label?.toLowerCase() ?? (multiple ? "items" : "an option")}…`;
 
   useEffect(() => {
     if (!open) return;
     const controller = new window.AbortController();
     let active = true;
     setLoading(true);
-    setError("");
     const timer = setTimeout(async () => {
       try {
         const url = new URL(options.optionsUrl, window.location.origin);
         url.searchParams.set("search", search);
-        url.searchParams.set("page", String(page));
         const response = await window.fetch(url, {
           headers: { Accept: "application/json" },
           signal: controller.signal,
-          credentials: "same-origin",
+          credentials: "same-origin"
         });
         if (!response.ok) throw new Error("Could not load options.");
         const data = await response.json();
-        if (active) setResult(data);
+        if (active) {
+          setResult(data);
+          setActiveResultId(data.resourceOptions[0]?.[1] ?? "");
+          setError("");
+        }
       } catch (failure) {
-        if (active && failure.name !== "AbortError")
-          setError("Could not load options.");
+        if (active && failure.name !== "AbortError") setError("Could not load options.");
       } finally {
-        if (active) setLoading(false);
+        if (active) {
+          setLoading(false);
+        }
       }
     }, 200);
     return () => {
@@ -61,7 +55,7 @@ export function AssociationSelect({
       clearTimeout(timer);
       controller.abort();
     };
-  }, [open, search, page, options.optionsUrl, retry]);
+  }, [open, search, options.optionsUrl, retry]);
 
   const select = (option) => {
     const id = option[1];
@@ -70,10 +64,9 @@ export function AssociationSelect({
         ? selectedIds.filter((item) => item !== id)
         : [...selectedIds, id]
       : [id];
-    const nextOptions = [
-      ...selectedOptions.filter((item) => item[1] !== id),
-      option,
-    ].filter((item) => nextIds.includes(item[1]));
+    const nextOptions = [...selectedOptions.filter((item) => item[1] !== id), option].filter((item) =>
+      nextIds.includes(item[1])
+    );
     setSelectedIds(nextIds);
     setSelectedOptions(nextOptions);
     onChange?.(multiple ? nextIds : id, option);
@@ -87,140 +80,192 @@ export function AssociationSelect({
     onChange?.(multiple ? nextIds : "", null);
   };
 
+  const changeOpen = (next) => {
+    setOpen(next);
+    if (next) {
+      setLoading(true);
+    }
+  };
+
   return (
     <div className="space-y-2">
       {label && (
         <Label htmlFor={input?.id}>
           {label}
-          {required && " *"}
+          {required && <span className="text-destructive ml-1">*</span>}
         </Label>
       )}
       {input?.name && <input type="hidden" name={input.name} value="" />}
-      {input?.name &&
-        selectedIds.map((id) => (
-          <input key={id} type="hidden" name={input.name} value={id} />
-        ))}
-      {multiple && (
-        <div className="flex flex-wrap gap-1">
-          {selectedOptions
-            .filter((option) => selectedIds.includes(option[1]))
-            .map(([display, id]) => (
-              <button
-                key={id}
-                type="button"
-                className="rounded bg-muted px-2 py-1 text-sm"
-                aria-label={`Remove ${display}`}
-                onClick={() => remove(id)}
-              >
-                {display} ×
-              </button>
-            ))}
-        </div>
-      )}
-      <Popover
-        open={open}
-        onOpenChange={(next) => {
-          setOpen(next);
-          if (next) setLoading(true);
-        }}
-      >
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            id={input?.id}
-            aria-describedby={input?.["aria-describedby"]}
-            role="combobox"
-            aria-expanded={open}
-            aria-controls={popupId}
-            aria-haspopup="dialog"
-            className="flex min-h-10 w-full items-center rounded-md border px-3 py-2 text-sm"
-          >
-            {multiple
-              ? "Select items…"
-              : (selectedOptions.find(
-                  (option) => option[1] === selectedIds[0],
-                )?.[0] ?? "Select…")}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent id={popupId} className="w-80 space-y-2">
-          <input
-            aria-label={`Search ${label ?? "options"}`}
-            value={search}
-            placeholder="Search…"
-            className="w-full rounded border px-2 py-1"
-            onChange={(event) => {
-              setSearch(event.target.value);
-              setPage(1);
-              setLoading(true);
-            }}
-          />
-          {loading ? (
-            <p role="status">Loading…</p>
-          ) : error ? (
-            <div role="alert">
-              {error}{" "}
-              <button
-                type="button"
-                onClick={() => setRetry((count) => count + 1)}
-              >
-                Retry
-              </button>
-            </div>
-          ) : (
-            <div
-              className="max-h-60 overflow-y-auto"
-              role="group"
-              aria-label="Options"
-            >
-              {result.resourceOptions.length === 0 && <p>No results found.</p>}
-              {result.resourceOptions.map((option) => (
-                <button
-                  key={option[1]}
-                  type="button"
-                  aria-pressed={selectedIds.includes(option[1])}
-                  className="block w-full rounded px-2 py-1 text-left hover:bg-muted"
-                  onClick={() => select(option)}
-                >
-                  {selectedIds.includes(option[1]) ? "✓ " : ""}
-                  {option[0]}
-                </button>
-              ))}
-            </div>
+      {input?.name && selectedIds.map((id) => <input key={id} type="hidden" name={input.name} value={id} />)}
+      <Popover open={open} onOpenChange={changeOpen}>
+        <div
+          className={cn(
+            "border-border bg-background text-foreground relative flex min-h-10 w-full items-center rounded-md border px-3 py-2 text-sm shadow-sm transition-colors",
+            "hover:border-ring/50 focus-within:border-ring focus-within:ring-ring/20 focus-within:ring-2",
+            open && "border-ring ring-ring/20 ring-2"
           )}
-          <div className="flex items-center justify-between">
+        >
+          <PopoverTrigger asChild>
             <button
               type="button"
-              disabled={loading || page === 1}
-              onClick={() => {
-                setPage(page - 1);
-                setLoading(true);
+              id={input?.id}
+              data-slot="association-trigger"
+              aria-describedby={input?.["aria-describedby"]}
+              aria-label={label ?? "Select options"}
+              role="combobox"
+              aria-expanded={open}
+              aria-controls={popupId}
+              aria-haspopup="dialog"
+              className="absolute inset-0 w-full cursor-pointer rounded-md outline-none"
+              onKeyDown={(event) => {
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                  event.preventDefault();
+                  changeOpen(true);
+                }
               }}
             >
-              Previous
+              <span className="sr-only">
+                {selected.length ? selected.map(([name]) => name).join(", ") : placeholder}
+              </span>
             </button>
-            <span>Page {page}</span>
+          </PopoverTrigger>
+          <div
+            className={cn(
+              "pointer-events-none flex min-w-0 flex-1 flex-wrap items-center gap-1.5 pr-6",
+              !multiple && selected.length > 0 && "pr-12"
+            )}
+          >
+            {selected.length === 0 ? (
+              <span className="text-muted-foreground truncate">{placeholder}</span>
+            ) : multiple ? (
+              selected.map(([display, id]) => (
+                <span
+                  key={id}
+                  className="border-border/60 bg-secondary text-secondary-foreground relative inline-flex max-w-full items-center gap-1 rounded border py-0.5 pl-2 pr-1 text-xs font-medium"
+                >
+                  <span className="truncate">{display}</span>
+                  <button
+                    type="button"
+                    aria-label={`Remove ${display}`}
+                    className="text-muted-foreground hover:bg-foreground/10 hover:text-foreground focus-visible:ring-ring pointer-events-auto relative z-10 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2"
+                    onClick={() => remove(id)}
+                  >
+                    <X className="size-3" aria-hidden="true" />
+                  </button>
+                </span>
+              ))
+            ) : (
+              <span className="truncate">{selected[0][0]}</span>
+            )}
+          </div>
+          {!multiple && selected.length > 0 && (
             <button
               type="button"
-              disabled={loading || !!error || !result.hasMore}
-              onClick={() => {
-                setPage(page + 1);
-                setLoading(true);
-              }}
+              aria-label={`Clear ${label ?? "selection"}`}
+              className="text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring absolute right-8 z-10 inline-flex size-6 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2"
+              onClick={() => remove(selectedIds[0])}
             >
-              Next
+              <X className="size-3.5" aria-hidden="true" />
             </button>
-          </div>
+          )}
+          <ChevronsUpDown
+            className="text-muted-foreground pointer-events-none absolute right-3 size-4"
+            aria-hidden="true"
+          />
+        </div>
+        <PopoverContent
+          id={popupId}
+          align="start"
+          sideOffset={6}
+          className="border-border bg-popover text-popover-foreground w-[var(--radix-popover-trigger-width)] max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg p-0 shadow-lg"
+          onOpenAutoFocus={(event) => {
+            event.preventDefault();
+            searchRef.current?.focus();
+          }}
+        >
+          <Command
+            shouldFilter={false}
+            loop
+            value={activeResultId}
+            onValueChange={setActiveResultId}
+            label={`Search ${label ?? "options"}`}
+            className="bg-popover text-popover-foreground flex w-full flex-col overflow-hidden"
+          >
+            <div className="border-border flex items-center gap-2.5 border-b px-3">
+              <span
+                data-slot="association-search-indicator"
+                className="text-muted-foreground relative size-4 shrink-0"
+                aria-hidden="true"
+              >
+                {loading ? <Loader2 className="size-4 animate-spin" /> : <Search className="size-4" />}
+              </span>
+              <Command.Input
+                ref={searchRef}
+                data-slot="association-search"
+                type="text"
+                aria-label={`Search ${label ?? "options"}`}
+                value={search}
+                placeholder={`Search ${label?.toLowerCase() ?? "options"}…`}
+                className="bg-transparent! text-popover-foreground placeholder:text-muted-foreground h-11 min-w-0 flex-1 border-0 px-0 text-sm shadow-none outline-none focus:border-0 focus:outline-none focus:ring-0"
+                onValueChange={(text) => {
+                  setSearch(text);
+                  setLoading(true);
+                }}
+              />
+            </div>
+            <span role="status" className="sr-only">
+              {loading ? "Searching…" : ""}
+            </span>
+            <Command.List
+              className="max-h-64 min-h-20 scroll-py-1 overflow-y-auto overflow-x-hidden p-1"
+              aria-busy={loading}
+            >
+              {error ? (
+                <div role="alert" className="text-muted-foreground space-y-2 px-3 py-5 text-center text-sm">
+                  <p>{error}</p>
+                  <button
+                    type="button"
+                    className="text-foreground focus-visible:ring-ring rounded px-2 py-1 font-medium underline underline-offset-4 outline-none focus-visible:ring-2"
+                    disabled={loading}
+                    onClick={() => {
+                      setLoading(true);
+                      setRetry((count) => count + 1);
+                    }}
+                  >
+                    Try again
+                  </button>
+                </div>
+              ) : result ? (
+                <>
+                  {result.resourceOptions.length === 0 && (
+                    <p className="text-muted-foreground px-3 py-6 text-center text-sm">No results found.</p>
+                  )}
+                  {result.resourceOptions.map((option) => (
+                    <Command.Item
+                      key={option[1]}
+                      value={option[1]}
+                      aria-label={option[0]}
+                      aria-checked={selectedIds.includes(option[1])}
+                      disabled={loading}
+                      onSelect={() => select(option)}
+                      className="data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex min-h-9 cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm outline-none"
+                    >
+                      <span className="min-w-0 flex-1 truncate">{option[0]}</span>
+                      <Check
+                        className={cn(
+                          "size-4 shrink-0",
+                          selectedIds.includes(option[1]) ? "text-primary" : "opacity-0"
+                        )}
+                        aria-hidden="true"
+                      />
+                    </Command.Item>
+                  ))}
+                </>
+              ) : null}
+            </Command.List>
+          </Command>
         </PopoverContent>
       </Popover>
-      {!multiple && selectedIds.length > 0 && (
-        <button
-          type="button"
-          className="text-sm text-muted-foreground"
-          onClick={() => remove(selectedIds[0])}
-        >
-          Clear selection
-        </button>
-      )}
     </div>
   );
 }

data/lib/terrazzo/field/associative.rb

@@ -1,20 +1,17 @@
 module Terrazzo
   module Field
     class Associative < Base
-      OPTION_PAGE_SIZE = 25
+      OPTION_LIMIT = 10
 
-      def association_options(search:, page:)
-        page = [page.to_i, 1].max
+      def association_options(search:)
         scope = candidate_scope
         columns = options[:searchable_fields] || (%w[name title email slug code original_filename id] &
           (associated_class.column_names + associated_class.stored_attributes.values.flatten.map(&:to_s)))
         scope = Terrazzo::Search.new(scope, nil, search).run_for_columns(columns)
         scope = scope.reorder(options[:order] || association_primary_key).order(association_primary_key)
-        records = scope.offset((page - 1) * OPTION_PAGE_SIZE).limit(OPTION_PAGE_SIZE + 1).to_a
+        records = scope.limit(OPTION_LIMIT).to_a
         {
-          resourceOptions: records.first(OPTION_PAGE_SIZE).map { |record| option_for(record) },
-          page: page,
-          hasMore: records.length > OPTION_PAGE_SIZE
+          resourceOptions: records.map { |record| option_for(record) }
         }
       end
 

data/lib/terrazzo/version.rb

@@ -1,3 +1,3 @@
 module Terrazzo
-  VERSION = "0.7.6"
+  VERSION = "0.7.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: terrazzo
 version: !ruby/object:Gem::Version
-  version: 0.7.6
+  version: 0.7.8
 platform: ruby
 authors:
 - Terrazzo Contributors