Expose useFilter from Combobox and Autocomplete

[pedromenezes1]

Re-export Base UI's useFilter from Kumo's Combobox and Autocomplete namespaces.

Base UI defaults to case- and accent-insensitive filtering via Intl.Collator, but consumers writing a custom filter often silently override it with naive .toLowerCase().includes(). Typing "portugues" then fails to find "Português", and "cote" fails to find "Côte d'Ivoire". Two of our own demos shipped this anti-pattern.

• Re-export useFilter and Filter types from Combobox and Autocomplete
• Fix the two broken Autocomplete demos to use useFilter().contains
• Switch combobox demos to a shared 12-item native-name languages list so accent-insensitivity is demonstrable
• Document the default + override pattern in combobox.mdx and autocomplete.mdx

After the change, the recommended pattern is:

function LanguagePicker() {
  const { contains } = Autocomplete.useFilter();
  return (
    <Autocomplete
      items={languages}
      filter={(item, query) => contains(item.label, query)}
    >
      {/* ... */}
    </Autocomplete>
  );
}

---

• Reviews
• bonk has reviewed the change
• automated review not possible because: mostly demo data, docs, and a single re-export
• Tests
• Tests included/updated
• Automated tests not possible - manual testing has been completed as follows:
• Additional testing not necessary because: re-exports an already-tested Base UI hook

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@551

commit: c2d4c9a

[github-actions]

Docs Preview

View docs preview

Commit: 99ee66a

[pedromenezes1]

/bonk

[ask-bonk]

PR #551 Summary: Expose useFilter from Combobox and Autocomplete

What it does

• Re-exports Base UI's useFilter hook and Filter types from Kumo's Autocomplete and Combobox namespaces
• Fixes two Autocomplete demos that used naive .toLowerCase().includes() filtering, which broke accent-insensitive matching (e.g., "portugues" not matching "Português")
• Refactors Combobox demos to use a shared 12-item native-name languages list so accent-insensitivity is easy to demonstrate
• Documents the recommended default + override pattern in autocomplete.mdx and combobox.mdx

Recommended pattern after the change

const { contains } = Autocomplete.useFilter();
return (
  <Autocomplete items={languages} filter={(item, query) => contains(item.label, query)}>
    {/* ... */}
  </Autocomplete>
);

Stats

• +112 / −63 across 10 files, 6 commits
• Includes a changeset (.changeset/expose-usefilter-hook.md)
• Docs preview generated at: https://aee3b4de-kumo-docs.design-engineering.workers.dev

Thread activity

• pkg-pr-new provided an install link: npm i https://pkg.pr.new/@cloudflare/kumo@551
• github-actions posted a docs preview link
• Author notes this is mostly demo data, docs, and a single re-export (no new tests needed, as it re-exports an already-tested Base UI hook)

github run

[github-actions]

Visual Regression Report — 18 changed, 21 unchanged

18 screenshot(s) with visual changes:

Button / Variant: Ghost

179 px (0.18%) changed

Before	After	Diff

Button / With Icon

422 px (0.42%) changed

Before	After	Diff

Button / Loading State

201 px (0.2%) changed

Before	After	Diff

Button / Title

433 px (0.43%) changed

Before	After	Diff

Dialog / Dialog Alert

354 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Combobox

244 px (0.24%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

225 px (0.22%) changed

Before	After	Diff

Select / Select Sizes

429 px (0.23%) changed

Before	After	Diff

Select / Select Without Label

160 px (0.16%) changed

Before	After	Diff

Select / Select With Error

1,979 px (1.67%) changed

Before	After	Diff

Select / Select Placeholder

672 px (0.66%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Complex

1,225 px (1.03%) changed

Before	After	Diff

Select / Select Disabled Items

176 px (0.17%) changed

Before	After	Diff

Select / Select Grouped With Disabled

848 px (0.84%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

1,956 px (0.01%) changed

Before	After	Diff

21 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / Icon Only
• Button / Disabled State
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog (Open)
• Select / Select Basic
• Select / Select With Description
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Disabled Options
• Select / Select Grouped

---

Generated by Kumo Visual Regression