@bearmenu/ui 0.8.52 → 0.8.53

package/src/components/filter-option-group.test.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { FilterOptionGroup } from "./filter-option-group";
+import { FacetGroup } from "./facet-group";
+
+describe("FilterOptionGroup", () => {
+  it("keeps selected options outside the cap reachable and summarizes them on collapse", async () => {
+    const user = userEvent.setup();
+    const options = Array.from({ length: 9 }, (_, i) => ({
+      value: String(i),
+      label: `Cuisine ${i}`,
+    }));
+    render(
+      <FilterOptionGroup
+        title="Cuisine"
+        options={options}
+        value={["8"]}
+        onValueChange={() => {}}
+        defaultOpen
+        showAllLabel="Show all"
+        showLessLabel="Show less"
+      />,
+    );
+    expect(screen.getByRole("checkbox", { name: "Cuisine 8" })).toBeChecked();
+    expect(
+      screen.queryByRole("checkbox", { name: "Cuisine 7" }),
+    ).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Show all" }));
+    expect(screen.getByRole("checkbox", { name: "Cuisine 7" })).toBeVisible();
+    await user.click(screen.getByRole("button", { name: /^Cuisine/ }));
+    expect(screen.getByRole("button", { name: /Cuisine 8/ })).toBeVisible();
+    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+  });
+
+  it("leaves the group open after the last selection is removed", async () => {
+    function Example() {
+      const [value, setValue] = useState<(string | number)[]>(["open"]);
+      return (
+        <FilterOptionGroup
+          title="Opening hours"
+          options={[{ value: "open", label: "Open now" }]}
+          value={value}
+          onValueChange={setValue}
+          defaultOpen
+        />
+      );
+    }
+    render(<Example />);
+    await userEvent.click(screen.getByRole("checkbox", { name: "Open now" }));
+    expect(
+      screen.getByRole("checkbox", { name: "Open now" }),
+    ).not.toBeChecked();
+    expect(
+      screen.getByRole("button", { name: "Opening hours" }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("caps each vocabulary independently", () => {
+    const options = ["Dishes", "Cuisines"].flatMap((section) =>
+      Array.from({ length: 8 }, (_, i) => ({
+        value: `${section}-${i}`,
+        label: `${section} ${i}`,
+        section,
+      })),
+    );
+    render(
+      <FilterOptionGroup
+        title="Food"
+        options={options}
+        value={[]}
+        onValueChange={() => {}}
+        defaultOpen
+        showAllLabel="All"
+        showLessLabel="Less"
+      />,
+    );
+    expect(screen.getAllByRole("checkbox")).toHaveLength(12);
+    expect(screen.getAllByRole("button", { name: "All" })).toHaveLength(2);
+  });
+
+  it("adapts the existing FacetGroup single selection contract", async () => {
+    const onToggle = vi.fn();
+    render(
+      <FacetGroup
+        layout="chips"
+        title="When"
+        selection="single"
+        options={[
+          { id: "today", label: "Today", count: 1, checked: true },
+          { id: "tomorrow", label: "Tomorrow", count: 2 },
+        ]}
+        onToggle={onToggle}
+      />,
+    );
+    await userEvent.click(screen.getByRole("radio", { name: "Tomorrow" }));
+    expect(onToggle).toHaveBeenCalledExactlyOnceWith("tomorrow", true);
+  });
+});

package/src/components/filter-option-group.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { type ReactNode, useId, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { FilterOptionChip } from "./filter-option-chip";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Separator } from "./separator";
+import { Text } from "./text";
+import { cn } from "../lib/utils";
+
+export type FilterOptionValue = string | number;
+export type FilterOptionGroupProps = {
+  title: string;
+  options: {
+    value: FilterOptionValue;
+    label: string;
+    count?: number | null;
+    icon?: ReactNode;
+    section?: string;
+  }[];
+  value: FilterOptionValue[];
+  onValueChange: (value: FilterOptionValue[]) => void;
+  selection?: "multiple" | "single";
+  name?: string;
+  defaultOpen?: boolean;
+  collapsible?: boolean;
+  visibleLimit?: number;
+  showAllLabel?: string | ((count: number) => string);
+  showLessLabel?: string;
+  /** Extra controls or a selection explanation, before the options. */
+  children?: ReactNode;
+  footer?: ReactNode;
+  clearLabel?: string;
+  onClear?: () => void;
+  /** Omit neutral choices from the active summary without changing radio selection. */
+  summaryValues?: FilterOptionValue[];
+  className?: string;
+  divider?: boolean;
+  disabled?: boolean;
+};
+
+/** Presentation only: callers own filter rules, URL state, counts and translations. */
+export function FilterOptionGroup({
+  title,
+  options,
+  value,
+  onValueChange,
+  selection = "multiple",
+  name,
+  defaultOpen = false,
+  collapsible = true,
+  visibleLimit = 6,
+  showAllLabel,
+  showLessLabel,
+  children,
+  footer,
+  clearLabel,
+  onClear,
+  summaryValues = value,
+  className,
+  divider = true,
+  disabled,
+}: FilterOptionGroupProps) {
+  const id = useId();
+  const [isOpen, setOpen] = useState(defaultOpen);
+  const open = !collapsible || isOpen;
+  const [expanded, setExpanded] = useState<string[]>([]);
+  const selected = options.filter((option) =>
+    summaryValues.includes(option.value),
+  );
+  const sections: { label?: string; options: typeof options }[] = [];
+  for (const option of options) {
+    const last = sections[sections.length - 1];
+    if (!last || last.label !== option.section)
+      sections.push({ label: option.section, options: [option] });
+    else last.options.push(option);
+  }
+  const heading = (
+    <>
+      <span className="min-w-0 flex-1">
+        <Text
+          as="span"
+          id={`${id}-title`}
+          className="block"
+          variant="body-sm"
+          weight="semibold"
+        >
+          {title}
+        </Text>
+        {!open && selected.length > 0 && (
+          <Text
+            as="span"
+            variant="caption"
+            color="muted"
+            className="mt-1 block leading-relaxed [overflow-wrap:anywhere]"
+          >
+            {selected.map((option) => option.label).join(" · ")}
+          </Text>
+        )}
+      </span>
+      {selected.length > 0 && (
+        <Badge variant="secondary" className="tabular-nums">
+          {selected.length}
+        </Badge>
+      )}
+      {collapsible && (
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+            open && "rotate-180",
+          )}
+        />
+      )}
+    </>
+  );
+  return (
+    <section className={cn("min-w-0", className)}>
+      <div className="py-2">
+        <div className="flex items-center gap-2">
+          {collapsible ? (
+            <button
+              type="button"
+              onClick={() => setOpen((previous) => !previous)}
+              aria-expanded={open}
+              aria-controls={id}
+              className="flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-lg py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            >
+              {heading}
+            </button>
+          ) : (
+            <div className="flex min-h-11 min-w-0 flex-1 items-center gap-3 py-2">
+              {heading}
+            </div>
+          )}
+          {onClear && clearLabel && summaryValues.length > 0 && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="min-h-11 shrink-0 px-2 text-xs"
+              onClick={onClear}
+            >
+              {clearLabel}
+            </Button>
+          )}
+        </div>
+        <div id={id} hidden={!open}>
+          {children}
+          {sections.map((section, index) => {
+            const sectionId = `${id}-section-${index}`;
+            const key = section.label ?? "";
+            const isExpanded = expanded.includes(key);
+            const limit = showAllLabel ? visibleLimit : Infinity;
+            const visible = isExpanded
+              ? section.options
+              : section.options.filter(
+                  (option, i) => i < limit || value.includes(option.value),
+                );
+            return (
+              <div key={key}>
+                {section.label && (
+                  <Text
+                    as="h4"
+                    id={sectionId}
+                    variant="caption"
+                    weight="semibold"
+                    color="muted"
+                    className="mt-3 mb-1"
+                  >
+                    {section.label}
+                  </Text>
+                )}
+                <fieldset
+                  aria-labelledby={`${id}-title${section.label ? ` ${sectionId}` : ""}`}
+                  disabled={disabled}
+                  className="m-0 flex min-w-0 flex-wrap gap-2 border-0 px-0 pt-2 pb-3"
+                >
+                  {visible.map((option) => (
+                    <FilterOptionChip
+                      key={option.value}
+                      label={option.label}
+                      count={option.count}
+                      icon={option.icon}
+                      type={selection === "single" ? "radio" : "checkbox"}
+                      name={selection === "single" ? (name ?? id) : undefined}
+                      value={option.value}
+                      checked={value.includes(option.value)}
+                      onChange={(event) =>
+                        onValueChange(
+                          selection === "single"
+                            ? [option.value]
+                            : event.target.checked
+                              ? [...value, option.value]
+                              : value.filter((item) => item !== option.value),
+                        )
+                      }
+                    />
+                  ))}
+                </fieldset>
+                {section.options.length > limit && (
+                  <Button
+                    type="button"
+                    variant="link"
+                    aria-expanded={isExpanded}
+                    onClick={() =>
+                      setExpanded((previous) =>
+                        isExpanded
+                          ? previous.filter((item) => item !== key)
+                          : [...previous, key],
+                      )
+                    }
+                    className="mb-1 min-h-11 px-0"
+                  >
+                    {isExpanded
+                      ? showLessLabel
+                      : typeof showAllLabel === "function"
+                        ? showAllLabel(section.options.length)
+                        : showAllLabel}
+                  </Button>
+                )}
+              </div>
+            );
+          })}
+          {footer}
+        </div>
+      </div>
+      {divider && <Separator />}
+    </section>
+  );
+}

package/src/components/filter-panel-footer.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Button } from "./button";
+import { Text } from "./text";
+
+export type FilterPanelFooterProps = {
+  resetLabel: string;
+  resultsLabel: string;
+  onReset: () => void;
+  onResults: () => void;
+  canReset: boolean;
+  pending?: boolean;
+  resetHint?: string;
+};
+
+/** Persistent actions belong outside the panel's scroll container. */
+export function FilterPanelFooter({
+  resetLabel,
+  resultsLabel,
+  onReset,
+  onResults,
+  canReset,
+  pending,
+  resetHint,
+}: FilterPanelFooterProps) {
+  return (
+    <footer
+      className="shrink-0 border-t border-border bg-card px-4 pt-3 pb-[max(1rem,env(safe-area-inset-bottom))]"
+      data-slot="filter-panel-footer"
+    >
+      <div className="flex flex-wrap gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          className="min-h-11 h-auto flex-1 whitespace-normal py-2"
+          disabled={!canReset}
+          onClick={onReset}
+        >
+          {resetLabel}
+        </Button>
+        <Button
+          type="button"
+          className="min-h-11 h-auto flex-[2] whitespace-normal py-2"
+          disabled={pending}
+          aria-busy={pending || undefined}
+          onClick={onResults}
+        >
+          {resultsLabel}
+        </Button>
+      </div>
+      {resetHint && (
+        <Text
+          as="p"
+          variant="caption"
+          color="muted"
+          className="mt-2 leading-relaxed"
+        >
+          {resetHint}
+        </Text>
+      )}
+    </footer>
+  );
+}