@carlonicora/nextjs-jsonapi 4.0.7 → 4.0.8

package/src/shadcnui/custom/multi-select.tsx

@@ -14,6 +14,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
+  commandFilterByKeywords,
 } from "../ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { Separator } from "../ui/separator";
@@ -39,6 +40,18 @@ const multiSelectVariants = cva(
   },
 );
 
+/**
+ * Every row carries a unique `value` (an option's own value, or a reserved
+ * sentinel for the static rows) so that two options with the same label do not
+ * share cmdk's text-derived value and highlight/select together. The searchable
+ * text lives in `keywords`, and the filter scores the keywords alone: that keeps
+ * typing-to-search matching exactly what it matched when the value was the
+ * row's text, instead of also matching the option's raw value.
+ */
+const SELECT_ALL_VALUE = "__multi-select:select-all__";
+const CLEAR_VALUE = "__multi-select:clear__";
+const CLOSE_VALUE = "__multi-select:close__";
+
 /**
  * Props for MultiSelect component
  */
@@ -365,7 +378,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
           style={{ minWidth: triggerWidth > 0 ? triggerWidth : undefined }}
           align="start"
         >
-          <Command>
+          <Command filter={commandFilterByKeywords}>
             <CommandInput
               autoFocus
               placeholder="Search..."
@@ -383,6 +396,8 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                 {!hideSelectAll && (
                   <CommandItem
                     key="all"
+                    value={SELECT_ALL_VALUE}
+                    keywords={["(Select All)"]}
                     onSelect={toggleAll}
                     className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   >
@@ -406,6 +421,8 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                   return (
                     <CommandItem
                       key={option.value}
+                      value={option.value}
+                      keywords={[option.label]}
                       onSelect={() => toggleOption(option.value)}
                       className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                     >
@@ -430,13 +447,20 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                 <div className="flex items-center justify-between">
                   {selectedValues.length > 0 && (
                     <>
-                      <CommandItem onSelect={handleClear} className="flex-1 cursor-pointer justify-center">
+                      <CommandItem
+                        value={CLEAR_VALUE}
+                        keywords={["Clear"]}
+                        onSelect={handleClear}
+                        className="flex-1 cursor-pointer justify-center"
+                      >
                         Clear
                       </CommandItem>
                       <Separator orientation="vertical" className="flex h-full min-h-6" />
                     </>
                   )}
                   <CommandItem
+                    value={CLOSE_VALUE}
+                    keywords={["Close"]}
                     onSelect={() => setIsPopoverOpen(false)}
                     className="max-w-full flex-1 cursor-pointer justify-center hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   >

package/src/shadcnui/custom/multiple-selector.spec.tsx

@@ -0,0 +1,111 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { MultipleSelector, type MultipleSelectorProps, type Option } from "./multiple-selector";
+
+// Two options with the SAME label: when the row value was the label, both rows shared
+// one cmdk value and highlighted/selected together.
+const options: Option[] = [
+  { label: "Mario Rossi", value: "u1" },
+  { label: "Mario Rossi", value: "u2" },
+  { label: "Anna Bianchi", value: "u3" },
+];
+
+async function openList(props: Partial<MultipleSelectorProps> = {}) {
+  render(<MultipleSelector defaultOptions={options} placeholder="pick" {...props} />);
+  await userEvent.click(screen.getByPlaceholderText("pick"));
+  return screen.findByRole("listbox");
+}
+
+const highlightedRows = (list: HTMLElement) =>
+  within(list)
+    .getAllByRole("option")
+    .filter((o) => o.getAttribute("aria-selected") === "true");
+
+const optionNames = (list: HTMLElement) =>
+  within(list)
+    .getAllByRole("option")
+    .map((o) => o.textContent);
+
+describe("MultipleSelector", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  it("highlights only one of two same-labelled options and selects the one clicked", async () => {
+    const onChange = vi.fn();
+    const list = await openList({ onChange });
+
+    const highlighted = highlightedRows(list);
+    expect(highlighted).toHaveLength(1);
+    expect(highlighted[0]).toHaveTextContent("Mario Rossi");
+
+    await userEvent.keyboard("{ArrowDown}");
+    expect(highlightedRows(list)).toHaveLength(1);
+
+    const sameLabelled = within(list).getAllByRole("option", { name: "Mario Rossi" });
+    expect(sameLabelled).toHaveLength(2);
+    await userEvent.click(sameLabelled[1]);
+    expect(onChange).toHaveBeenLastCalledWith([options[1]]);
+  });
+
+  it("still filters by the option label when the user types", async () => {
+    const list = await openList();
+    await userEvent.type(screen.getByPlaceholderText("pick"), "anna");
+
+    await waitFor(() => expect(within(list).queryAllByRole("option", { name: "Mario Rossi" })).toHaveLength(0));
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+  });
+
+  it("does not match an option by its raw value, only by its label (as before)", async () => {
+    const list = await openList();
+    await userEvent.type(screen.getByPlaceholderText("pick"), "u3");
+
+    await waitFor(() => expect(within(list).queryByRole("option", { name: "Anna Bianchi" })).toBeNull());
+  });
+
+  it("ranks matches by label score as before", async () => {
+    const list = await openList({
+      defaultOptions: [
+        { label: "Cabana", value: "o1" },
+        { label: "Ananas", value: "o2" },
+      ],
+    });
+    expect(optionNames(list)).toEqual(["Cabana", "Ananas"]);
+
+    await userEvent.type(screen.getByPlaceholderText("pick"), "ana");
+    await waitFor(() => expect(optionNames(list)).toEqual(["Ananas", "Cabana"]));
+  });
+
+  it("keeps the create row findable and creates the typed text", async () => {
+    const onChange = vi.fn();
+    const list = await openList({ onChange, creatable: true });
+    await userEvent.type(screen.getByPlaceholderText("pick"), "Zed");
+
+    const createRow = await within(list).findByRole("option", { name: 'Create "Zed"' });
+    expect(within(list).queryAllByRole("option", { name: "Mario Rossi" })).toHaveLength(0);
+    await userEvent.click(createRow);
+    expect(onChange).toHaveBeenLastCalledWith([{ value: "Zed", label: "Zed" }]);
+  });
+
+  it("filters by substring of the label when creatable, as before", async () => {
+    const list = await openList({ creatable: true });
+    await userEvent.type(screen.getByPlaceholderText("pick"), "bianchi");
+
+    await waitFor(() => expect(within(list).queryAllByRole("option", { name: "Mario Rossi" })).toHaveLength(0));
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+  });
+
+  it("hands a caller-supplied filter the row text, never the raw option value", async () => {
+    const filter = vi.fn((value: string, search: string) => (value.toLowerCase().includes(search) ? 1 : 0));
+    const list = await openList({ commandProps: { filter } });
+    await userEvent.type(screen.getByPlaceholderText("pick"), "anna");
+
+    await waitFor(() => expect(within(list).queryAllByRole("option", { name: "Mario Rossi" })).toHaveLength(0));
+    const seenValues = filter.mock.calls.map((c) => c[0]);
+    expect(seenValues).toContain("Anna Bianchi");
+    expect(seenValues).not.toContain("u1");
+    expect(seenValues).not.toContain("u3");
+  });
+});

package/src/shadcnui/custom/multiple-selector.tsx

@@ -8,7 +8,7 @@ import { forwardRef, useEffect } from "react";
 
 import { cn } from "../../utils/cn";
 import { Badge } from "../ui/badge";
-import { Command, CommandGroup, CommandItem, CommandList } from "../ui/command";
+import { Command, CommandGroup, CommandItem, CommandList, commandFilterByKeywords } from "../ui/command";
 
 export interface Option {
   value: string;
@@ -140,6 +140,19 @@ function removePickedOption(groupOption: GroupOption, picked: Option[]) {
   return cloneOption;
 }
 
+/**
+ * Every option row carries its own unique `value` (the option's `value`), and
+ * the "create" row a reserved one, so two options with the same label do not
+ * share cmdk's value and highlight/select together. The row's searchable text
+ * lives in `keywords`, and every filter below is given that text where it used
+ * to receive the value, so typing matches and ranks exactly as it did when the
+ * value was the label — and never matches an option's raw value.
+ */
+const CREATE_VALUE = "__multiple-selector:create__";
+
+/** The text a row is searched by: its keywords, or its value when it has none (the "-" placeholders). */
+const rowText = (value: string, keywords?: string[]) => (keywords && keywords.length > 0 ? keywords.join(" ") : value);
+
 function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
   for (const [, value] of Object.entries(groupOption)) {
     if (value.some((option) => targetOption.find((p) => p.value === option.value))) {
@@ -396,17 +409,22 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
 
       const Item = (
         <CommandItem
-          value={inputValue}
+          // cmdk only re-reads an item's keywords when its value changes, so the
+          // typed text is part of the reserved value to keep the keywords current.
+          value={`${CREATE_VALUE}${inputValue}`}
+          keywords={[inputValue]}
           className="cursor-pointer"
           onMouseDown={(e) => {
             e.preventDefault();
             e.stopPropagation();
           }}
-          onSelect={(value: string) => {
+          onSelect={() => {
             if (selected.length >= maxSelected) {
               onMaxSelected?.(selected.length);
               return;
             }
+            // cmdk used to hand back the row's value, which was the typed text trimmed.
+            const value = inputValue.trim();
             setInputValue("");
             const newOptions = [...selected, { value, label: value }];
             setSelected(newOptions);
@@ -445,16 +463,19 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
     const selectables = React.useMemo<GroupOption>(() => removePickedOption(options, selected), [options, selected]);
 
     const commandFilter = React.useCallback(() => {
-      if (commandProps?.filter) {
-        return commandProps.filter;
+      const customFilter = commandProps?.filter;
+      if (customFilter) {
+        // A caller's filter keeps receiving the row text as `value` (no keywords), as before.
+        return (value: string, search: string, keywords?: string[]) =>
+          customFilter(rowText(value, keywords), search, []);
       }
 
       if (creatable) {
-        return (value: string, search: string) => {
-          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+        return (value: string, search: string, keywords?: string[]) => {
+          return rowText(value, keywords).toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
         };
       }
-      return undefined;
+      return commandFilterByKeywords;
     }, [creatable, commandProps?.filter]);
 
     // Determine which badges to display
@@ -613,7 +634,8 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                             return (
                               <CommandItem
                                 key={option.value}
-                                value={option.label}
+                                value={option.value}
+                                keywords={[option.label]}
                                 disabled={option.disable}
                                 onMouseDown={(e) => {
                                   e.preventDefault();
@@ -688,7 +710,8 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                           return (
                             <CommandItem
                               key={option.value}
-                              value={option.label}
+                              value={option.value}
+                              keywords={[option.label]}
                               disabled={option.disable}
                               onMouseDown={(e) => {
                                 e.preventDefault();

package/src/shadcnui/ui/command.spec.ts

@@ -0,0 +1,26 @@
+import { defaultFilter } from "cmdk";
+import { describe, expect, it } from "vitest";
+
+import { commandFilterByKeywords } from "./command";
+
+describe("commandFilterByKeywords", () => {
+  it("scores the keywords exactly as cmdk scores the same text used as a value", () => {
+    expect(commandFilterByKeywords("u1", "mar", ["Mario Rossi"])).toBe(defaultFilter("Mario Rossi", "mar"));
+    expect(commandFilterByKeywords("u1", "mar", ["Mario Rossi"])).toBeGreaterThan(0);
+  });
+
+  it("does not match an id-like value when the keywords do not match", () => {
+    expect(commandFilterByKeywords("9f3c-uuid-1234", "1234", ["Mario Rossi"])).toBe(0);
+    expect(commandFilterByKeywords("u3", "u3", ["Anna Bianchi"])).toBe(0);
+  });
+
+  it("joins several keywords into one searchable text", () => {
+    expect(commandFilterByKeywords("u1", "rossi", ["Mario", "Rossi"])).toBeGreaterThan(0);
+  });
+
+  it("falls back to the value when there are no keywords", () => {
+    expect(commandFilterByKeywords("Mario Rossi", "mar")).toBe(defaultFilter("Mario Rossi", "mar"));
+    expect(commandFilterByKeywords("Mario Rossi", "mar", [])).toBeGreaterThan(0);
+    expect(commandFilterByKeywords("Mario Rossi", "zzz", [])).toBe(0);
+  });
+});

package/src/shadcnui/ui/command.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive, defaultFilter } from "cmdk";
 
 import { cn } from "@/lib/utils";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -167,6 +167,17 @@ function CommandShortcut({ className, ...props }: React.ComponentProps<"span">)
   );
 }
 
+/**
+ * A `filter` for a `<Command>` whose items carry a unique `value` (an id) and
+ * their searchable text in `keywords`. cmdk's default filter scores the value
+ * AND the keywords, so an id value would make its own characters searchable;
+ * this one scores the keywords alone, and falls back to the value only for an
+ * item that has no keywords. Usage: `<Command filter={commandFilterByKeywords}>`
+ * with `<CommandItem value={id} keywords={[label]}>`.
+ */
+const commandFilterByKeywords = (value: string, search: string, keywords?: string[]) =>
+  defaultFilter(keywords && keywords.length > 0 ? keywords.join(" ") : value, search);
+
 export {
   Command,
   CommandDialog,
@@ -177,4 +188,5 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
+  commandFilterByKeywords,
 };