@zentauri-ui/zentauri-components 1.9.2 → 2.0.0

package/src/ui/combobox/combobox.test.tsx

@@ -0,0 +1,292 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSearch,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "./combobox-base";
+
+function BasicCombobox({
+  multiple = false,
+  defaultValue = [],
+  onChange,
+}: {
+  multiple?: boolean;
+  defaultValue?: string[];
+  onChange?: (v: string[]) => void;
+}) {
+  return (
+    <Combobox
+      multiple={multiple}
+      defaultValue={defaultValue}
+      onChange={onChange}
+    >
+      <ComboboxTrigger>
+        <ComboboxValue placeholder="Pick a fruit" />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxSearch placeholder="Search fruits..." />
+        <ComboboxList>
+          <ComboboxItem value="apple">Apple</ComboboxItem>
+          <ComboboxItem value="banana">Banana</ComboboxItem>
+          <ComboboxItem value="cherry">Cherry</ComboboxItem>
+          <ComboboxItem value="disabled-grape" disabled>
+            Grape
+          </ComboboxItem>
+          <ComboboxEmpty>No fruit found.</ComboboxEmpty>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+describe("Combobox", () => {
+  it("renders the trigger as a button", () => {
+    render(<BasicCombobox />);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "button");
+  });
+
+  it("shows placeholder when nothing is selected", () => {
+    render(<BasicCombobox />);
+    expect(
+      screen.getByRole("button", { name: /pick a fruit/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows selected label in trigger after selection", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(screen.getByRole("button")).toHaveTextContent("Apple");
+  });
+
+  it("opens the panel and lists options on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    expect(
+      await screen.findByRole("option", { name: /apple/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /cherry/i })).toBeInTheDocument();
+  });
+
+  it("closes the panel on second trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    await screen.findByRole("option", { name: /apple/i });
+    await user.click(trigger);
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes after picking one value in single mode", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox multiple={false} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /banana/i }));
+    expect(
+      screen.queryByRole("option", { name: /banana/i }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveTextContent("Banana");
+  });
+
+  it("keeps panel open after picking in multiple mode", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox multiple />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+  });
+
+  it("marks selected option with aria-selected=true", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox defaultValue={["apple"]} />);
+    await user.click(screen.getByRole("button"));
+    const apple = await screen.findByRole("option", { name: /apple/i });
+    const banana = screen.getByRole("option", { name: /banana/i });
+    expect(apple).toHaveAttribute("aria-selected", "true");
+    expect(banana).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("calls onChange when a value is toggled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /cherry/i }));
+    expect(onChange).toHaveBeenCalledWith(["cherry"]);
+  });
+
+  it("deselects a value in multiple mode on second click", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <BasicCombobox multiple defaultValue={["apple"]} onChange={onChange} />,
+    );
+    await user.click(screen.getByRole("button"));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("marks a disabled option with aria-disabled and ignores clicks", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const grape = await screen.findByRole("option", { name: /grape/i });
+    expect(grape).toHaveAttribute("aria-disabled", "true");
+    await user.click(grape);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("Combobox — search and filtering", () => {
+  it("renders a search input inside the panel", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    expect(search).toBeInTheDocument();
+  });
+
+  it("auto-focuses the search input when panel opens", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+  });
+
+  it("filters options as the user types", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await user.type(search, "ban");
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: /cherry/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the empty state when no options match", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await user.type(search, "xyz");
+    expect(screen.getByText(/no fruit found/i)).toBeInTheDocument();
+  });
+
+  it("clears the filter and restores all options after closing and reopening", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button", { name: /pick a fruit/i });
+    await user.click(trigger);
+    await user.type(await screen.findByRole("combobox"), "ban");
+    await user.click(trigger);
+    await user.click(trigger);
+    expect(
+      await screen.findByRole("option", { name: /apple/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+  });
+});
+
+describe("Combobox — keyboard navigation", () => {
+  it("closes the panel on Escape", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button", { name: /pick a fruit/i });
+    await user.click(trigger);
+    await screen.findByRole("combobox");
+    await user.keyboard("{Escape}");
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("moves highlight through options with ArrowDown/ArrowUp", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    const apple = screen.getByRole("option", { name: /apple/i });
+    expect(apple).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("{ArrowDown}");
+    const banana = screen.getByRole("option", { name: /banana/i });
+    expect(banana).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("{ArrowUp}");
+    expect(apple).toHaveAttribute("data-active", "true");
+  });
+
+  it("selects the highlighted option on Enter", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["apple"]);
+  });
+
+  it("skips disabled options during keyboard navigation", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowUp}");
+    expect(screen.getByRole("option", { name: /cherry/i })).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    expect(screen.getByRole("option", { name: /grape/i })).not.toHaveAttribute(
+      "data-active",
+    );
+
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["cherry"]);
+  });
+
+  it("wires trigger aria attributes to the listbox", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    const listbox = screen.getByRole("listbox");
+    const controls = trigger.getAttribute("aria-controls");
+    expect(listbox).toHaveAttribute("id", controls);
+  });
+});

package/src/ui/combobox/combobox.tsx

@@ -0,0 +1,8 @@
+import { Combobox as ComboboxBase } from "./combobox-base";
+import type { ComboboxProps } from "./types";
+
+export const Combobox = (props: ComboboxProps) => {
+  return <ComboboxBase {...props} />;
+};
+
+Combobox.displayName = "Combobox";

package/src/ui/combobox/index.ts

@@ -0,0 +1,33 @@
+"use client";
+
+export {
+  Combobox,
+  ComboboxContext,
+  useCombobox,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxContent,
+  ComboboxSearch,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+} from "./combobox-base";
+export type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+  ComboboxContentProps,
+  ComboboxSearchProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+  ComboboxOption,
+  ComboboxContextType,
+  ComboboxAppearance,
+} from "./types";
+export {
+  comboboxTriggerVariants,
+  comboboxItemVariants,
+  comboboxListVariants,
+  comboboxContentVariants,
+} from "./variants";

package/src/ui/combobox/types.ts

@@ -0,0 +1,91 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  RefObject,
+} from "react";
+
+import type { zuiComboboxContentAppearances } from "../../design-system/combobox";
+import type { comboboxTriggerVariants } from "./variants";
+
+export type ComboboxOption = {
+  label: ReactNode;
+  value: string;
+  disabled?: boolean;
+};
+
+export type ComboboxAppearance = keyof typeof zuiComboboxContentAppearances;
+
+export type ComboboxContextType = {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+  query: string;
+  setQuery: (q: string) => void;
+  selected: string[];
+  toggleValue: (v: string) => void;
+  isSelected: (v: string) => boolean;
+  multiple: boolean;
+  options: ComboboxOption[];
+  registerOption: (opt: ComboboxOption) => void;
+  visibleValues: string[];
+  isVisible: (v: string) => boolean;
+  activeValue: string | null;
+  setActiveValue: (v: string | null) => void;
+  triggerId: string;
+  listboxId: string;
+  searchRef: RefObject<HTMLInputElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+
+export type ComboboxProps = {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  multiple?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+type ComboboxTriggerVariantProps = VariantProps<typeof comboboxTriggerVariants>;
+
+export type ComboboxTriggerProps = ComboboxTriggerVariantProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
+    className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+  };
+
+export type ComboboxValueProps = HTMLAttributes<HTMLSpanElement> & {
+  placeholder?: ReactNode;
+};
+
+export type ComboboxContentProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+  appearance?: ComboboxAppearance;
+  size?: "sm" | "md" | "lg";
+  spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl";
+};
+
+export type ComboboxSearchProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type"
+> & {
+  className?: string;
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+export type ComboboxListProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
+
+export type ComboboxItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  children: ReactNode;
+  disabled?: boolean;
+  appearance?: ComboboxAppearance;
+};
+
+export type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};

package/src/ui/combobox/variants.ts

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiComboboxContentAppearances,
+  zuiComboboxContentBase,
+  zuiComboboxDisabled,
+  zuiComboboxItemAppearances,
+  zuiComboboxItemBase,
+  zuiComboboxListAppearances,
+  zuiComboboxListBase,
+  zuiComboboxSizes,
+  zuiComboboxSpacing,
+  zuiComboboxTriggerBase,
+  zuiComboboxTriggerVariants,
+} from "../../design-system/combobox";
+
+export const comboboxTriggerVariants = cva(zuiComboboxTriggerBase, {
+  variants: {
+    variant: zuiComboboxTriggerVariants,
+    size: zuiComboboxSizes,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+export const comboboxItemVariants = cva(zuiComboboxItemBase, {
+  variants: {
+    appearance: zuiComboboxItemAppearances,
+    disabled: zuiComboboxDisabled,
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const comboboxListVariants = cva(zuiComboboxListBase, {
+  variants: {
+    appearance: zuiComboboxListAppearances,
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const comboboxContentVariants = cva(zuiComboboxContentBase, {
+  variants: {
+    appearance: zuiComboboxContentAppearances,
+    size: zuiComboboxSizes,
+    spacing: zuiComboboxSpacing,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    spacing: "default",
+  },
+});