@boxcustodia/library 2.0.0-alpha.17 → 2.0.0-alpha.19

package/src/components/combobox/combobox.test.tsx

@@ -0,0 +1,458 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxRoot,
+  ComboboxRow,
+  ComboboxSearchInput,
+  ComboboxSelectTrigger,
+  ComboboxSeparator,
+  ComboboxStatus,
+} from "../../components";
+import { Field } from "../field/field";
+
+const items = [
+  { id: "1", name: "Apple" },
+  { id: "2", name: "Banana" },
+  { id: "3", name: "Cherry" },
+];
+
+function getInput(): HTMLInputElement {
+  return document.querySelector(
+    '[data-slot="combobox-input"]',
+  ) as HTMLInputElement;
+}
+
+describe("Combobox (single mode)", () => {
+  it("renders an input with role combobox and the placeholder", () => {
+    render(<Combobox items={items} placeholder="Pick fruit" />);
+
+    const input = screen.getByRole("combobox");
+    expect(input).toHaveAttribute("placeholder", "Pick fruit");
+    expect(input).toHaveAttribute("data-slot", "combobox-input");
+  });
+
+  it("opens and filters the list as the user types", async () => {
+    render(<Combobox items={items} placeholder="Pick" />);
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "an");
+
+    const options = screen.getAllByRole("option");
+    expect(options.map((o) => o.textContent)).toEqual(["Banana"]);
+  });
+
+  it("fires onValueChange with the selected item object", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Combobox items={items} placeholder="Pick" onValueChange={onValueChange} />,
+    );
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "Cherry");
+    await userEvent.click(screen.getByRole("option"));
+
+    expect(onValueChange.mock.calls[0][0]).toEqual({ id: "3", name: "Cherry" });
+  });
+
+  it("shows the default empty text when nothing matches", async () => {
+    render(<Combobox items={items} placeholder="Pick" />);
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "zzz");
+
+    expect(
+      document.querySelector('[data-slot="combobox-empty"]'),
+    ).toHaveTextContent("Sin resultados.");
+  });
+
+  it("shows a custom empty text", async () => {
+    render(<Combobox items={items} placeholder="Pick" emptyText="Nada acá" />);
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "zzz");
+
+    expect(
+      document.querySelector('[data-slot="combobox-empty"]'),
+    ).toHaveTextContent("Nada acá");
+  });
+
+  it("renders a start addon", () => {
+    render(
+      <Combobox
+        items={items}
+        placeholder="Pick"
+        startAddon={<span data-testid="addon">@</span>}
+      />,
+    );
+
+    expect(screen.getByTestId("addon")).toBeInTheDocument();
+  });
+
+  it("renders the clear control by default and hides it when showClear is false", () => {
+    const { unmount } = render(<Combobox items={items} placeholder="P" />);
+    expect(
+      document.querySelector('[data-slot="combobox-trigger"]'),
+    ).toBeInTheDocument();
+    unmount();
+
+    render(<Combobox items={items} placeholder="P" showClear={false} />);
+    // With showClear=false the end adornment still renders the trigger toggle.
+    expect(
+      document.querySelector('[data-slot="combobox-input"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("reflects a controlled value in the input", () => {
+    render(<Combobox items={items} placeholder="P" value={items[1]} />);
+
+    expect(getInput().value).toBe("Banana");
+  });
+
+  it("uses renderItem to customize option content", async () => {
+    render(
+      <Combobox
+        items={items}
+        placeholder="P"
+        renderItem={(item) => <span data-testid="custom">{item.name}!</span>}
+      />,
+    );
+
+    await userEvent.click(getInput());
+    await userEvent.type(getInput(), "Apple");
+
+    expect(screen.getByTestId("custom")).toHaveTextContent("Apple!");
+  });
+
+  it("applies classNames to input, popup, list and item slots", async () => {
+    render(
+      <Combobox
+        items={items}
+        placeholder="P"
+        classNames={{
+          input: "input-cls",
+          popup: "popup-cls",
+          list: "list-cls",
+          item: "item-cls",
+          empty: "empty-cls",
+        }}
+      />,
+    );
+
+    expect(getInput()).toHaveClass("input-cls");
+
+    await userEvent.click(getInput());
+    await userEvent.type(getInput(), "Apple");
+
+    expect(document.querySelector('[data-slot="combobox-popup"]')).toHaveClass(
+      "popup-cls",
+    );
+    expect(document.querySelector('[data-slot="combobox-list"]')).toHaveClass(
+      "list-cls",
+    );
+    expect(document.querySelector('[data-slot="combobox-item"]')).toHaveClass(
+      "item-cls",
+    );
+  });
+});
+
+describe("Combobox getId / getLabel defaults", () => {
+  it("handles { label, value } shaped items", () => {
+    const opts = [
+      { label: "One", value: "1" },
+      { label: "Two", value: "2" },
+    ];
+    render(<Combobox items={opts} placeholder="P" value={opts[0]} />);
+
+    expect(getInput().value).toBe("One");
+  });
+
+  it("handles plain string items", () => {
+    render(<Combobox items={["x", "y", "z"]} placeholder="P" value="y" />);
+
+    expect(getInput().value).toBe("y");
+  });
+
+  it("respects custom getLabel and getId", () => {
+    const opts = [
+      { code: "AR", country: "Argentina" },
+      { code: "BR", country: "Brazil" },
+    ];
+    render(
+      <Combobox
+        items={opts}
+        placeholder="P"
+        value={opts[1]}
+        getLabel={(o) => o.country}
+        getId={(o) => o.code}
+      />,
+    );
+
+    expect(getInput().value).toBe("Brazil");
+  });
+
+  it("handles { title } shaped items", () => {
+    const opts = [{ title: "First" }, { title: "Second" }];
+    render(<Combobox items={opts} placeholder="P" value={opts[1]} />);
+
+    expect(getInput().value).toBe("Second");
+  });
+});
+
+describe("Combobox (multiple mode)", () => {
+  it("renders chips for the default selected values", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0], items[1]]}
+      />,
+    );
+
+    const chips = document.querySelectorAll('[data-slot="combobox-chip"]');
+    expect(
+      [...chips].map((c) => c.getAttribute("aria-label")),
+    ).toEqual(["Apple", "Banana"]);
+  });
+
+  it("renders the chips container and a chips search input", () => {
+    render(
+      <Combobox multiple items={items} placeholder="Search" defaultValue={[]} />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders a remove control on each chip", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0]]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Quitar" }),
+    ).toBeInTheDocument();
+  });
+
+  it("fires onValueChange when selecting an option", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[]}
+        defaultOpen
+        onValueChange={onValueChange}
+      />,
+    );
+
+    // With the popup open the chips search input is mounted.
+    const chipsInput = document.querySelector(
+      '[data-slot="combobox-chips-input"]',
+    ) as HTMLInputElement;
+    await userEvent.type(chipsInput, "Apple");
+    await userEvent.click(screen.getByRole("option"));
+
+    expect(onValueChange.mock.calls[0][0]).toEqual([items[0]]);
+  });
+
+  it("renders a start addon alongside the chips", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0]]}
+        startAddon={<span data-testid="chips-addon">#</span>}
+      />,
+    );
+
+    expect(screen.getByTestId("chips-addon")).toBeInTheDocument();
+  });
+});
+
+describe("Combobox Field integration", () => {
+  it("marks multiple-mode chips aria-invalid inside an invalid Field", () => {
+    render(
+      <Field label="Fruits" invalid>
+        <Combobox
+          multiple
+          items={items}
+          placeholder="P"
+          defaultValue={[items[0]]}
+        />
+      </Field>,
+    );
+
+    expect(document.querySelector('[data-slot="combobox-chips"]')).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    );
+  });
+
+  it("does not set aria-invalid when standalone", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0]]}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).not.toHaveAttribute("aria-invalid");
+  });
+
+  it("does not set aria-invalid inside a valid Field", () => {
+    render(
+      <Field label="Fruits">
+        <Combobox
+          multiple
+          items={items}
+          placeholder="P"
+          defaultValue={[items[0]]}
+        />
+      </Field>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).not.toHaveAttribute("aria-invalid");
+  });
+});
+
+describe("Combobox escape-hatch primitives", () => {
+  it("composes a select-style trigger with grouped items", () => {
+    render(
+      <ComboboxRoot
+        items={items}
+        itemToStringLabel={(i: (typeof items)[number]) => i.name}
+        defaultOpen
+      >
+        <ComboboxSelectTrigger placeholder="Choose" />
+        <ComboboxPopup>
+          <ComboboxStatus>Status</ComboboxStatus>
+          <ComboboxList>
+            {(item: (typeof items)[number]) => (
+              <ComboboxItem key={item.id} value={item}>
+                {item.name}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxPopup>
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-select-trigger"]'),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="combobox-status"]'),
+    ).toHaveTextContent("Status");
+    expect(screen.getAllByRole("option").length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("omits the end adornment when neither trigger nor clear is shown", () => {
+    render(
+      <ComboboxRoot items={items}>
+        <ComboboxInput showTrigger={false} showClear={false} />
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-input"]'),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="combobox-trigger"]'),
+    ).toBeNull();
+    expect(
+      document.querySelector('[data-slot="combobox-clear"]'),
+    ).toBeNull();
+  });
+
+  it("renders a select trigger with a clear control when showClear", () => {
+    render(
+      <ComboboxRoot items={items}>
+        <ComboboxSelectTrigger placeholder="Choose" showClear />
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-select-trigger-group"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("composes search input, separators and collection", () => {
+    render(
+      <ComboboxRoot items={items} defaultOpen>
+        <ComboboxSelectTrigger placeholder="Choose" />
+        <ComboboxPopup>
+          <ComboboxSearchInput placeholder="Search" className="search-cls" />
+          <ComboboxList>
+            <ComboboxCollection>
+              {(item: (typeof items)[number]) => (
+                <ComboboxRow key={item.id} className="row-cls">
+                  <ComboboxItem value={item}>{item.name}</ComboboxItem>
+                </ComboboxRow>
+              )}
+            </ComboboxCollection>
+          </ComboboxList>
+          <ComboboxSeparator className="sep-cls" />
+        </ComboboxPopup>
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-search-input"]'),
+    ).toHaveClass("search-cls");
+    expect(
+      document.querySelector('[data-slot="combobox-separator"]'),
+    ).toHaveClass("sep-cls");
+  });
+
+  it("renders a group with a label inside an open popup", () => {
+    render(
+      <ComboboxRoot items={items} defaultOpen>
+        <ComboboxSelectTrigger placeholder="Choose" />
+        <ComboboxPopup>
+          <ComboboxList>
+            <ComboboxGroup className="grp-cls">
+              <ComboboxGroupLabel className="grp-label-cls">
+                Fruits
+              </ComboboxGroupLabel>
+            </ComboboxGroup>
+          </ComboboxList>
+        </ComboboxPopup>
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-group"]'),
+    ).toHaveClass("grp-cls");
+    expect(
+      document.querySelector('[data-slot="combobox-group-label"]'),
+    ).toHaveTextContent("Fruits");
+  });
+});

package/src/components/combobox/combobox.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 import { Field as FieldPrimitive } from "@base-ui/react/field";
 import { ChevronsUpDownIcon, XIcon } from "lucide-react";
 import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/internal";
 import { cn } from "../../lib";
 import { useIsInsideFieldRoot } from "../field";
 import { Input, inputBaseClasses } from "../input";
@@ -245,20 +248,19 @@ export function ComboboxPopup({
         side={side}
         sideOffset={sideOffset}
       >
-        <span
+        <ComboboxPrimitive.Popup
           className={cn(
-            "relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative flex max-h-[min(var(--available-height),23rem)] min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-1 flex-col rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5",
+            "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
             className,
           )}
+          data-slot="combobox-popup"
+          {...props}
         >
-          <ComboboxPrimitive.Popup
-            className="flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground"
-            data-slot="combobox-popup"
-            {...props}
-          >
-            {children}
-          </ComboboxPrimitive.Popup>
-        </span>
+          {children}
+        </ComboboxPrimitive.Popup>
       </ComboboxPrimitive.Positioner>
     </ComboboxPrimitive.Portal>
   );
@@ -545,7 +547,7 @@ export function ComboboxChipRemove(
 ): React.ReactElement {
   return (
     <ComboboxPrimitive.ChipRemove
-      aria-label="Remove"
+      aria-label="Quitar"
       className="h-full shrink-0 cursor-pointer px-1 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
       data-slot="combobox-chip-remove"
       {...props}
@@ -601,7 +603,7 @@ function useChipOverflow(
 
   const isMeasuring = stableCount === null || stableCount.items !== itemCount;
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!isMeasuring) return;
 
     const container = containerRef?.current as HTMLElement | null;

package/src/components/date-picker/date-input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { isDate } from "date-fns";
 import { CalendarIcon } from "lucide-react";